How do i update the title option in an angular-nv3d piechart - angularjs

Question

I am using nvd3 piechart to show the size of the overall files in a folder.
my question is how to update the title of the chart after each data update is happening (for example to show the overall size in the title.
i tried using an object in the scope which does update with the currect size, but it does not update in the title option in the chart)
here is my code:
app.controller("chartCtrl", function($scope, foldersSrvc){
$scope.options = {
chart: {
type: "pieChart",
height: 400,
showLabels: true,
labelType: "value",
title: "Content(" + $scope.filesSize + ")",
labelSunbeamLayout: true,
x: function(d){return d.type;},
y: function(d){return d.size;},
donut: true
}
};
foldersSrvc.getFiles("server").then(function(data){
$scope.data = data;
$scope.filesSize = foldersSrvc.getFilesSize(data);
});
$scope.$on('folderClicked', function(event, args){
foldersSrvc.getFiles(args.id).then(function(data){
$scope.data = data;
$scope.filesSize = foldersSrvc.getFilesSize(data);
});
})
})

Answer 1

I recommend the angular wrapper for nvd3, angular-nvd3 to support data binding.
angular.module('myApp', ['nvd3'])
.controller('myCtrl', function($scope){
/* Chart options */
$scope.options = { /* JSON data */ };
/* Chart data */
$scope.data = { /* JSON data */ }
})
html
<div ng-app="myApp">
<div ng-controller="myCtrl">
<nvd3 options="options" data="data"></nvd3>
</div>
</div>