Angular-nvd3 issue, failed to update chart when set data to newData

Question

It is a strange issue not only about nvd3 directive, I have steped into the directive source code, but still not find the reason.
I put it in plunker, switch co

Answer 1

I believe this is a quirk of how nvd3 is using d3 data-binding.

The initial data array is bound to the DOM like a standard d3 visualization and holds a reference to it. When you modify the array in the directive, it triggers a redraw and since it's the same array (reference to it), the bound data is changed and the plot redraws normally.

When you change the array after the first draw, under the hood, the array that still data-binded is the initial array (the one with no data). The directive still triggers a re-draw but with no data.

To do what you want, instead of calling $scope.$apply(); get api into the $scope with:

and then use:

$scope.api.updateWithData($scope.data);

Updated example.