Highcharts-ng directive (Angular) not updating

Question

I'm using highcharts-ng Angular-JS directive to draw a chart on my page.

I am hoping to be able to update the data in my controller, and have these values reflected in the graph. However, when I update a $scope variable using assignment eg:

$scope.chartData = [1, 2, 3];

...then the graph is not updated. The only way I can get the graph updated is to push a value into the data, eg:

$scope.chartData.push(4);

...however this works only the first time it is performed. Here's a JS-fiddle showing what I mean: http://jsfiddle.net/K6hL8/

I'm new to Angular so I wanted to check whether there is an obvious problem with my Angular code (maybe I misunderstand $scope and two way bindings?) before I start blaming the third party directive.

Thanks in advance!

Edit:

So it appears (in this fiddle: http://jsfiddle.net/K6hL8/) that Angular does see the change in chartData (I've put a watch with an alert on it), but only when watch is called with "true" for equality. All the watches in the directive use 'true', so I'm stumped...

Answer 1

You are modifying a temporary data variable which is used to apply to actual chart. You need to modify directly .series data

    var data  = $scope.chartConfig.series[0].data;
    $scope.chartConfig.series[0].data = data.concat([data.length]);   

http://jsfiddle.net/K6hL8/4/