How can I create a pie chart with d3, nvd3 and AngularJs? Getting the error "Wrong typeError pieChart is not a function"

Question

How can I create a pie chart with d3, nvd3 and AngularJs? Getting the error "Wrong typeError pieChart is not a function"

I am trying to include d3 + nvd3 + angularjs-nvd3-directives in my angularjs .

So far I've just copied the example and am trying to get it to work.

This is the exact example I'm trying to do: http://angularjs-nvd3-directives.github.io/angularjs-nvd3-directives/pie.chart.html

/////////////////////

Error

When I try this example, I get the following error:

Unconnect TypeError : nv.models.pieChart (...). X (...). U (...). Width (...). Height (...). Stock (...). hints (...). NoData (...). showLabels (...). labelThreshold (...). labelType (...). pieLabelsOutside (...). ValueFormat (...). ShowLegend (...). description is not function

angular.module.directive.directive.directive.directive.directive.directive.directive.directive.link.scope. $ Watch.nv.addGraph.generate @ angularjs-nvd3-directives.min.js: 2

(anonymous function) @ nv.d3.min.js: 2

/////////////////////

code

Here is my code:

app-modules.js

angular.module('myApp', [
  'myApp.commonController', 
  'nvd3ChartDirectives',
  ...
])...

commonCtrl.js

angular.module('myApp.commonController', []).
  controller('d3Dashboard', ['$scope', function ($scope) {
      $scope.exampleData = [
        { 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: 9 }
         ];
  }])
  ...

dashboard.jade

div(ng-app='myApp')
    div(ng-controller='d3Dashboard')
        nvd3-pie-chart#exampleId(data='exampleData', width='550', height='350',  showlabels='true')
            svg

layout.jade

doctype html
html(ng-app="myApp")
    head
        meta(charset='utf-8')
        ...
        link(rel='stylesheet', href='/assets/css/nv.d3.min.css')
        ...

index.jade

extends layout
block body
    ...
  //JQUERY
  script(src='/app/node_modules/jquery/dist/jquery.min.js')
  //ANGULAR
  script(src='/app/node_modules/angular/angular.min.js')
  script(src='/app/node_modules/angular-route/angular-route.min.js')
  script(src='/app/node_modules/angular-resource/angular-resource.min.js')
  script(src='/app/app-modules.js')
  script(src='/app/services/services.js')
  script(src='/app/controllers/commonCtrl.js')
  script(src='/app/filters/filters.js')
  script(src='/app/directives/directives.js')
  //BOOTSTRAP
  script(src='/app/node_modules/bootstrap/dist/js/bootstrap.min.js')
  script(src='/app/node_modules/angular-bootstrap/dist/ui-bootstrap.min.js')
  script(src='/app/node_modules/angular-bootstrap/dist/ui-bootstrap-tpls.min.js')
  //D3, NVD3, ANGULAR-NVD3
  script(src='/app/node_modules/d3/d3.min.js')
  script(src='/assets/js/nv.d3.min.js')
  script(src='/app/node_modules/mobin-angular-nvd3-directives/dist/angularjs-nvd3-directives.min.js')