Javascript 角度$scope变量已更新但未显示

在下面的控制器中，$scope.timer每秒递增一次，但在视图中，

{{timer}}

并不反映它的内容

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

我可以通过添加

$scope.$apply（）来解决它定时器更新后为什么会这样？为什么定时器没有更新

在这里摆弄：
因为
setInterval
在
$digest
循环之外-使用Angulars
$interval
指令代替：

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

只需将代码包装到应用范围：

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);
}]);

或者使用$interval而不是setInterval（我更喜欢这样）：

改用
$interval
。谢谢你说得对，但为什么？
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);
}]);