AngularJS $スコープはコールバック関数で更新されませんか？

Question

私はこの単純なスニペットを持っている：

HTML：

<div ng-app="myApp" ng-controller="SampleController"> 
    <p>{{val1}}</p> 
    <p>{{val2}}</p> 
    <input type="button" value="Update" ng-click="update()" /> 
</div> 

Javascriptを：jsfiddleでも

var app = angular.module('myApp', []); 

app.controller('SampleController', ['$scope', function($scope) { 

    $scope.val1 = "Not updated"; 
    $scope.val2 = "Not updated"; 

    $scope.update = function() { 
     $scope.val1 = "Updated outside!"; 

     setTimeout(function() { 
      $scope.val2 = "Update inside!"; 
     }, 1); 
    }; 
}]); 

スニペット。

[更新]ボタンをクリックすると、値val1だけがhtmlに更新されます。それを修正するには？しかし、最も重要なのは、なぜこれが起こっているのか？

PS： setTimeoutは問題を単純化したものに過ぎません。実際には、コールバック関数を持つカスタムコンポーネントについての質問です。

Answer 1

setTimeoutはダイジェストサイクルをトリガーしないため、ビューは更新されません。角度は$timeoutモジュールに組み込まれています。これを使用するとダイジェストサイクルが実行され、ビューが更新されます。

使用するには：

app.controller('SampleController', ['$scope', '$timeout', function($scope, $timeout) { 
    $timeout(function() { $scope.val2 = "see?" }, 5000); 
}]);