Angular-nvD3 Pie Chart Not Displaying - angularjs

Question

I am trying to follow a simple example to make a pie chart but it does not render the chart. Even viewing the source, no chart code appears (only the original directive code). The controller is getting loaded as I do see the log file statement and the title property within the scope. I am not getting any errors to the console and a bit confused at the moment.
Thanks in advance
I am using the latest version of the libraries, added at the index.html file
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-nvd3-directives/0.0.7/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css"/>
Chart.html
<div >
<div ng-controller="chartsController" >
<div>
{{title}}
</div>
<nvd3ChartDirectives options="options" data="data" id="chartId" config="config" class="with-3d-shadow with-transitions">
</nvd3ChartDirectives>
</div>
</div>
Index.js
var app = angular.module('seApp', ['ngRoute', 'ngResource', 'ngMessages', 'ngAnimate', 'ui.bootstrap', 'smart-table', 'nvd3ChartDirectives']);
(Injecting as nvd3 does not work).
Chart.js
app.controller('chartsController', ['$scope', '$log', function($scope, $log) {
$scope.title = 'Chart Title';
$log.info ("Create Chart");
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
width: 600,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
transitionDuration: 500,
labelThreshold: 0.01,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
}
$scope.config = {
visible: true, // default: true
extended: false, // default: false
disabled: false, // default: false
autorefresh: true, // default: true
refreshDataOnly: false, // default: false
deepWatchOptions: true, // default: true
deepWatchData: false, // default: false
deepWatchConfig: true, // default: true
debounce: 10 // default: 10
};
$scope.xFunction = function(){
return function(d){
return d.key;
};
};
$scope.yFunction = function(){
return function(d){
return d.y;
};
};
$scope.data = [
{
key: "435fdfg",
y: 16
},
{
key: "fgfsgsg",
y: 12
},
{
key: "lodfrr",
y: 3
},
{
key: "yuiiyui",
y: 7
},
{
key: "adffd",
y: 4
}
]
}]);

Answer 1

I had a similar problem. After using ng-inspector I found out that the options where not passed in correctly due to a typo).
I did however tried to register the dependency with "nvd3ChartDirectives" but received an exception so I just used nvd3. Maybe this could be a possible problem.
I would recommend doing some debugging with ng-inspector or Batarang and check that the scope is set properly.
BTW, I'm using Angular 1.4.8.