How to change text in div while executing setInterval function using highcharts-ng with angularjs

Question

I have a controller which has the following call :

userFactory.getScore(_token, function (response) {
    $scope.scores = response;
    renderCharts(response,$scope);
    score.resolve();
});

here, userFactory is a factory.

Now in my function renderCharts :

function renderCharts(response,$scope) {

    $scope.current_target_label = {"label":"Current Score"};
    // Highcharts config object declaration here

    setInterval(function($scope) {
        // Logic to update highchart
        $scope.current_target_label = {"label":"Target Score"};
    }

}

Following assignment doesn't update the value in ng-bind in the html view : $scope.current_target_label = {"label":"Target Score"};

I am surely doing something wrong, appreciate for any pointers so as to what to do to get the value of text of div updated in the html view ?

Answer 1

setInterval is outside of angulars $digest-cycle , so angular will not update data-bindings. You could use $apply but, I'd say, that's bad practice. Better use $timeout or $interval . Wich will trigger the $digest-cycle . Eg:

function renderCharts(response,$scope) {
    // ...

    $interval(function() {
        // Logic to update highchart
        $scope.current_target_label = {"label":"Target Score"};
    }, delay);
}

Notes:

• You'll, of course, need to inject the service where you need it.
• In your original code you used setInterval(function($scope) { . $scope here will probably be undefined, and thus shadow the outer $scope variable.