scope variable updated in angular but change is not reflected to user

Question

I have some angular variables set like so:

$scope.pane = [];
$scope.pane.count = 0;
$scope.pane.max = 5;

Then I display the variables in the HTML like this:

{{pane.count}}

This works fine and displays 0 as expected.

Now if I update the variable at any point, the update does happen (I can see using console.log) but the printed version in the HTML does not update.

E.g.

setTimeout(function(){
  $scope.pane.count = 1;
},1000);

I am using Angular v1.3. What am I doing wrong?

Your pane should need to be {} object instead of array.

Rahil Wazir
– Rahil Wazir

2014-11-11 13:54:35 +00:00
Commented Nov 11, 2014 at 13:54 — Rahil Wazir
– Rahil Wazir, Commented Nov 11, 2014 at 13:54

halilb · Accepted Answer · 2014-11-11 13:57:04Z

15

In order to let angular know about changes, you have to use angular wrapper for timeout.

Try this:

$timeout(function() {
  $scope.pane.count = 1;
}, 1000);

Generally, when you have a structure outside angular world(such as jQuery plugin) that changes values, you have to call $scope.$apply() to let angular know about them.

$scope.$apply();

edited Nov 11, 2014 at 13:57

answered Nov 11, 2014 at 13:51

halilb

4,1251 gold badge25 silver badges32 bronze badges

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

7 Comments

CaribouCode Over a year ago

The setTimeout was just an example of the variable being changed. My script is actually more complex but the same issue applies (no setTimeout being used in my script).

CodingIntrigue Over a year ago

@Coop The same logic applies. Any non-angular event must inform Angular that something has changed. Using $timeout applies to your example, but you could equally use $apply too

halilb Over a year ago

when you have a structure outside angular world(such as jQuery plugin) that changes values, you have to call $scope.$apply() to let angular know about them.

CaribouCode Over a year ago

Awesome! I never knew about $apply. Thanks for that.

JayKandari Over a year ago

$scope.$apply(); Saved me hours !! :)

|

sylwester · Accepted Answer · 2014-11-11 13:55:40Z

setTimeout is outside angularjs scope so you need to use $scope.$apply or $timout please see sample demo below

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope, $timeout) {

  $scope.pane = [];
  $scope.pane.count = 0;
  $scope.pane.count2 = 0;
  $scope.pane.max = 5;

  setTimeout(function() {
    $scope.$apply(function() {
      $scope.pane.count = 1;
    })

  }, 1000);

  $timeout(function() {
    $scope.pane.count2 = 5;
  }, 2000);


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app">
  <div ng-controller="homeCtrl">
<h3>setTimeout</h3>
    Count 1: {{pane.count}}<br/>
    <h3>$timeout</h3>
    Count 2: {{pane.count2}}
  </div>
</div>

Collectives™ on Stack Overflow

scope variable updated in angular but change is not reflected to user

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related