AngularJS view not updating on model change

Question

i'm trying to figure out how Angular works and am having trouble getting my view to update when the model changes..

HTML

<div ng-app="test">           <p ng-controller="TestCtrl">               {{testValue}}           </p>       </div> 

JS

var app = angular.module('test', []);      app.controller('TestCtrl', function ($scope) {        $scope.testValue = 0;          setInterval(function() {             console.log($scope.testValue++);         }, 500);     }); 

http://jsfiddle.net/N2G7z/

any ideas?

Answer 1

As Ajay beniwal mentioned above you need to use Apply to start digestion.

var app = angular.module('test', []);  app.controller('TestCtrl', function ($scope) {    $scope.testValue = 0;      setInterval(function() {         console.log($scope.testValue++);         $scope.$apply()      }, 500); }); 

Answer 2

Just use $interval

Here is your code modified. http://plnkr.co/edit/m7psQ5rwx4w1yAwAFdyr?p=preview

var app = angular.module('test', []);  app.controller('TestCtrl', function ($scope, $interval) {    $scope.testValue = 0;      $interval(function() {         $scope.testValue++;     }, 500); });