Pie Chart with Angular-nvD3

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

app.controller('MainCtrl', function($scope, $q) {
  
  var p = $q((resolve) => {
    console.log("i was activated");
    return resolve(42); 
  });
  
  var a = $q.when(2);
  p = $q.when(p);
  
  p.then(console.log)
    ['finally'](()=> console.debug("1"))
    ['finally'](()=> console.debug("2"))
  
  this.name = "rick";
  
  var obj = {
    name: "nick",
    type: "engineer",
    likes: ['coffee', 'alissa', 'cats'],
    greet: function() {
      console.debug("hello " + this.name)
    }.bind(this)
  }
  
  obj.greet();
  
  
  $scope.options = {
            chart: {
                type: 'pieChart',
                height: 500,
                x: function(d){return d.key;},
                y: function(d){return d.y;},
                showLabels: true,
                duration: 500,
                labelThreshold: 0.01,
                labelSunbeamLayout: true,
                dispatch: {
                  changeState: function(d) {
                    console.debug("on changeState:", d); 
                  },
                  renderEnd: function(d) {
                    console.debug("on renderEnd:", d); 
                  }
                },
                tooltip: {
                    enabled: true,
                    valueFormatter:function (d, i) {
                        return parseInt(d)+"%";
                    }
                },
                legend: {
                    margin: {
                        top: 5,
                        right: 35,
                        bottom: 5,
                        left: 0
                    }
                }
            }
        };

        $scope.data = [
            {
                key: "One",
                y: 5
            },
            {
                key: "Two",
                y: 2
            },
            {
                key: "Three",
                y: 9
            },
            {
                key: "Four",
                y: 7
            },
            {
                key: "Five",
                y: 4
            },
            {
                key: "Six",
                y: 3
            },
            {
                key: "Seven",
                y: .5
            }
        ];
});

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

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Pie Chart</title>
    <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="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <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.1/nv.d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.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>
    
    <ul>
      <li ng-repeat="d in data">
<input type="text" ng-model="d.y">
      </li>
    </ul>
  </body>

</html>

/* Put your css in here */

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