CODEWITHSUNDEEP
angularjs
Royi Namir
Royi Namir

Reputation: 148744

AngularJS : view is not updated?

I have this simple markup : (jsbin)

  <div ng-app data-ng-controller="HelloWorldController">
    <div>
        <label>Message :
            <input ng-model="message">
        </label>
        <h1>{{message}}</h1>
    </div>
</div>

Where : 

  function HelloWorldController($scope)
  { var i=0;
    setInterval(function (){i++; 
                            console.log("Hello World "+i);
                            $scope.message="Hello World "+i;},1000);

  }

In the console it does show me the intervals :

enter image description here

But in the View - I don't see it ,and I should see it:

enter image description here

Question :

What am I missing here and why it doesn't update my view ?

Upvotes: 0

Views: 288

Answers (7)

Whisher
Whisher

Reputation: 32806

Using setInterval angularjs don't know what happens so you should do like

app.controller('HelloWorldController',function($scope){
               var i=0;
                setInterval(function (){i++; 
                    console.log("Hello World "+i);
                    $scope.$apply(function(){
                            $scope.message="Hello World "+i;
                        }
                    );   
               },1000);

        });

Upvotes: 1

Mike Cheel
Mike Cheel

Reputation: 13116

In a nutshell your call to setInterval is not being picked up by Angular. You need to call $scope.$apply() as mentioned in this article:

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

which clearly explains the details of what is going.

Also, as mentioned in the article, you should NOT have to use $scope.$apply if you use $timeout instead of setInterval.

Upvotes: 1

calebboyd
calebboyd

Reputation: 5753

A apply is not occuring. To do this without using an apply (and on an interval) You can use a promise, coincidentally $timeout uses these by default. To make your example work you can do this:

function HelloWorldController($scope,$timeout){
    var i=0;
    (function doStuff() {
        i++;
        console.log("Hello World "+i);
        $scope.message="Hello World "+i;
        $timeout(doStuff, 1000);
    }());   
}

Working JSBin: http://jsbin.com/IWedoYiP/9/

By using timeout. The callback is automatically resolved inside a promise. Which causes a digest. Automatically updating the view.

Upvotes: 1

Christoffer Bo Petersen
Christoffer Bo Petersen

Reputation: 129

if you add $scope.$apply(); after you have modified your scope it will update the ui.

Upvotes: 1

Daiwei
Daiwei

Reputation: 43706

You need to manually enter angular digest cycle to update views. use $scope.$apply in your controller:

function HelloWorldController($scope) {
  var i = 0;
  setInterval(function () {
    i++;
    console.log("Hello World " + i);
    $scope.$apply(function () {
      $scope.message = "Hello World " + i;
    });
  }, 1000);
}

Upvotes: 1

Alborz
Alborz

Reputation: 6913

You need to $apply your scope. Edit your code as follows

  function HelloWorldController($scope)
  { var i=0;
    setInterval(function (){i++; 
                            console.log("Hello World "+i);
                            $scope.message="Hello World "+i;
$scope.$apply();
},1000);

  }

Upvotes: 1

victormejia
victormejia

Reputation: 1184

You should be using Angular's $timeout service (I prefer this over manually causing Angular to run a digest cycle by using $scope.$apply). You don't want your Angular code littered with those statements.

So your code should be (Note that you will have to inject the timeout service):

function HelloWorldController($scope, $timeout){ 
     var i=0;
     $timeout(function () {
          i++; 
          console.log("Hello World "+i);
          $scope.message="Hello World "+i;
        },1000);
}

Upvotes: 1

Related Questions