Updating model programmatically in angularjs

Question

I am trying to do the following:

angular.module("controllers", [])
    .controller("FooController", function($scope) {
        $scope.foo = {};
        $scope.foo['bar'] = 0;
        setInterval(function(){
            $scope.foo['bar']++;
        }, 100);
} );

And then, I display the value of foo.bar in my view using

<div> {{ foo.bar }} </div>

The initial value is displayed correctly, but it is never updated. The callback within setInterval is called correctly and the value of bar is updated in javascript.

How can I programmatically "push" my data into the model? (in my real app I'll be pushing data from the server via websockets / atmosphere)

$interval

meze
– meze

2014-05-20 09:56:55 +00:00
Commented May 20, 2014 at 9:56 — meze
– meze, Commented May 20, 2014 at 9:56

romiem · Accepted Answer · 2014-05-20 09:57:47Z

2

If you use the angular $interval service instead of setInterval. Then you will not need to call $scope.$apply.

angular.module("controllers", [])
    .controller("FooController", function($scope, $interval) {
        $scope.foo = {};
        $scope.foo['bar'] = 0;
        $interval(function(){
            $scope.foo['bar']++;
        }, 100);
} );

answered May 20, 2014 at 9:57

romiem

9,1107 gold badges32 silver badges38 bronze badges

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

1 Comment

jfu Over a year ago

The question is more about a general "push", not of solving the dummy setTimeout (as I wrote, the real app will use websocket push, in which case the apply will work, while interval won't be useful)

link · Accepted Answer · 2014-05-20 09:54:48Z

0

You have to trigger a new digest cycle, in which Angular will check all the registered watches and update the view for objects that changed value. You can do it by calling $scope.$apply, which will trigger the digest cycle for you.

 setInterval(function(){
     $scope.$apply(function() {
         $scope.foo.bar++;
     })
 }, 100);

answered May 20, 2014 at 9:54

link

1,6861 gold badge13 silver badges21 bronze badges

1 Comment

link Over a year ago

Why the downvote? This is equivalent to $interval. It's not incorrect.

jfu · Accepted Answer · 2014-05-20 09:53:09Z

-1

Ok, I've found the answer: wrap $scope.foo['bar']++ into

$scope.$apply(function({
    $scope.foo['bar']++
}))

answered May 20, 2014 at 9:53

jfu

1,7101 gold badge23 silver badges31 bronze badges

Collectives™ on Stack Overflow

Updating model programmatically in angularjs

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related