angular $scope variable updated but not displayed

Question

In the below controller $scope.timer is incremented every second but in the view {{timer}} does not reflect it's content.

myapp.controller('TimeCtrl', ['$scope', function($scope){
    $scope.timer = 0;
    setInterval(function(){
        $scope.timer = $scope.timer + 1;
        console.log($scope.timer);
    },1000);
}]);

I'can solve it adding $scope.$apply(); after the timer is updated why is that ? Why is timer not updated ?

Fiddle here : http://jsfiddle.net/wvxgzx76/1/

Answer 1

Because setInterval is outside the $digest cycle - use Angulars $interval directive instead:

myapp.controller('TimeCtrl', ['$scope', '$interval', function($scope, $interval){
    $scope.timer = 0;
    $interval(function(){
        $scope.timer = $scope.timer + 1;
        console.log($scope.timer);
    },1000);
}]);

Answer 2

just wrap your code into scope apply:

var myapp = angular.module('myapp', []);
myapp.controller('TimeCtrl', ['$scope', function($scope){
    $scope.timer = 0;
    setInterval(function(){
        $scope.$apply(function () {
            $scope.timer = $scope.timer + 1;
            console.log($scope.timer);
        });
    },1000);
}]);

or use $interval instead of setInterval (i would prefer this):

var myapp = angular.module('myapp', []);
myapp.controller('TimeCtrl', ['$scope', '$interval', function($scope,$interval){
    $scope.timer = 0;
    $interval(function(){       
        $scope.timer = $scope.timer + 1;
        console.log($scope.timer);
    },1000);
}]);

http://jsfiddle.net/wvxgzx76/3/