Donut Chart with Angular-nvD3

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
 $scope.options = {
            chart: {
                type: 'pieChart',
                height: 450,
                donut: true,
                x: function(d){return d.key;},
                y: function(d){return d.y;},
                showLabels: true,
                
                // pie: {
                //     startAngle: function(d) { return d.startAngle -Math.PI/2 },
                //     endAngle: function(d) { return d.endAngle -Math.PI/2 }
                // },
                    // startAngle: (function(d) { return d.startAngle + Math.PI/2; }),
                    // endAngle: (function(d) { return d.endAngle + Math.PI/2; }),
                showLegend: false,
                duration: 500,
                margin: {
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0
                }

            }
        };

        $scope.data = [
            {
                key: "complete",
                color: "green",
                y: 5
            },
            {
                key: "pending",
                color: "gray",                
                y: 22
            }
        ];
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Donut Chart</title>
    <script data-require="angular.js@1.5.11" data-semver="1.5.11" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.6/dist/angular-nvd3.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <nvd3 options="options" data="data"></nvd3>
    <br />
    <a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
  </body>

</html>

/* Put your css in here */

Read more about Angular-nvD3:
http://krispo.github.io/angular-nvd3/