Two-way binding is not recognising variable change in AngularJS

Question

I have a slider that is used to changed a value in my controller like so

index:

            <div>
                <rzslider
                     rz-slider-model="slider.value"
                     rz-slider-options="slider.options">
                </rzslider>
                     <p>{{slider.value}}</p>
            </div>

controller:

app.controller('gbarchartController', function($scope) {
$scope.slider = {
          value: 20,
          options: {
            floor: 0,
            ceil: 30
          }
        };

When i change the value of the slider, the code below displays it on screen as 2 way binding should.

<p>{{slider.value}}</p>

The problem is , if i try to access this variable through a function in my controller, it uses the initial value of 20 that has been set. eg. If i change the slider to 10, the below code still uses the value 20. the variable in question is $scope.slider.value . The value is used to cut the length of an array, that in turn is used to display a graph using highchart.js.

            $scope.graph = function(metric) {
        Highcharts.chart(metric, {

            chart: {
                type: 'column'
            },
            title: {
                text: 'Number Of Executions'
            },
            colors: [
                     '#7CFC00', '#FF0000'
                     ],

            xAxis: {
                categories: numExe.hash.slice(0, $scope.slider.value),
                title: {
                    text: 'Query Hash Value'
                }
            },
            yAxis: {
                title: {
                    text: '% of Total Executions'
                }
            },
            tooltip: {
                shared:true
            },

            series: [{
                name: 'Baseline',
                data: numExe.base.slice(0, $scope.slider.value)
            },
            {
                name: 'Comparative',
                data: numExe.compare.slice(0, $scope.slider.value)
            }]
        });

    }

Long story short, The variable changes in the html but does not change in the controller. Any help would be great thanks.

Answer 1

I don't think Highcharts monitors its data for changes, so it won't detect changes to your series data (see docs here). Additionally the series data passed in to the graph is static, so it won't update after the slider changes. You'll need to create a local Series variable to hold the series data, and update the series data when the slider changes. I'm not sure what numExe is so I can't say how the data is generated, but the Series object has setData() method (with a redraw parameter) that should do the trick.