Value not updating on the HTML using Angular

Question

I have a controller in which a value gets randomly generated

app.controller('detailReadingCtrl',function(){
  var value = 0;
  $scope.dispValue = 0;

 setInterval(function(){
   value = Math.floor(Math.random()*1000);
   $scope.dispValue = value;
 }
});

and my html is

<div>{{dispValue}}</div>

The Value on the html is not getting updated with the changed value. The dispvalue is changing in the controller but it is not updating in the html. I want to see the value change for every second on the screen without the need of refresh.

I tried using $scope.$watch and also $scope.$broadcast both seem to not work. Please let me know if you have any ideas about this.

tymeJV · Accepted Answer · 2015-03-13 16:13:56Z

3

setInterval doesn't trigger a $digest cycle, instead, use the $interval module:

app.controller('detailReadingCtrl',function($scope, $interval){
    var value = 0;
    $scope.dispValue = 0;

    $interval(function(){
        value = Math.floor(Math.random()*1000);
        $scope.dispValue = value;
    });
});

And you had other errors in the code ($scope wasn't being injected, missing ) at the end of the interval)

answered Mar 13, 2015 at 16:13

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chait Over a year ago

Thank you so much. I am able to see the change in the values. Thanks for the help. I removed the other errors too

Collectives™ on Stack Overflow

Value not updating on the HTML using Angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related