CODEWITHSUNDEEP
javascriptangularjsscope
Marc Rasmussen
Marc Rasmussen

Reputation: 20545

Angularjs $scope value is not updated

Okay i have the following HTML:

<timer countdown="30" interval="1000">
{{seconds}}
percent
</timer>
{{timerSeconds}}

For this i have the following controller code:

$scope.timerRunning = true;
$scope.timerSeconds = 100;
$scope.$on('timer-tick',function(e, val) {
    $scope.timerSeconds = (Math.floor(val.millis / 1000) / 30 * 100);
});

However the view timerSeconds is not updated. I verified the event by debugging and found that it is executing the function and changing timerSeconds value.

Upvotes: 2

Views: 93

Answers (1)

Sn0opr
Sn0opr

Reputation: 1026

after this line: 

$scope.timerSeconds = (Math.floor(val.millis / 1000) / 30 * 100);

add

$scope.apply();

So that AngularJS check if there is changes in models and rerender them.

In many cases AngularJS can't dected a model change, especially in an Asynch functions like $on()

read more about it: When to use $scope.$apply()

If it dosn't work, use AngularJS $timeout function

$scope.$on('timer-tick',function(e, val) {
    $timeout(function(){
      $scope.timerSeconds = (Math.floor(val.millis / 1000) / 30 * 100);
    })
});

Upvotes: 3

Related Questions