Как изменить значение после задержки с помощью angularjs?

Я создал базовое приложение на основе angularjs

HTML:

<div ng-app="miniapp">
<div ng-controller="Ctrl">
    My name is 
    <input type="text"/>   
    Val: {{val}}
    <br/>
    <button ng-disabled="val">Submit</button>        
</div>

JS:

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

var glob;
function Ctrl($scope) {      
    glob = $scope;    
     $scope.val = false;

     window.setTimeout(function() {
            $scope.val = true;
        }, 3000);             
}

 window.setTimeout(function() {
            glob.val = true;
        }, 3000);

Как вы можете видеть, я пытаюсь изменить val на true через 3 секунды на 2 пути, но никто не работает для меня. Действительно странно. Я что-то пропустил?

На самом деле я пытаюсь изменить значение после получения ответа от Ajax, но предположим, что это должна быть та же проблема.

Спасибо,

Вот мой пример: http://jsfiddle.net/6uKAT/20/

Ответ 1

Попробуйте использовать $timeout

Angular оболочка для window.setTimeout. Функция fn завернута в блок try/catch и делегирует любые исключения из $exceptionHandler.

$timeout(fn[, delay][, invokeApply]);

Обновлено Fiddle

JavaScript

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

function Ctrl($scope, $timeout) {  
     $scope.val = false;
     $timeout(function(){$scope.val = true}, 3000);       
}

Ответ 2

Вы вносите изменения в область вне того, что знает angular (внутри таймаута).
Поэтому вы должны использовать $timeout.. в противном случае вы должны использовать $scope.$apply()

$timeout(function() {
    $scope.val = true;
}, 3000);

http://jsfiddle.net/6uKAT/21/

Для тайм-аута используйте $timeout, и он вызовет $scope.$apply() для вас.
Аналогично, для ajax используйте $http.

если вы не можете их использовать, вы должны сами вызвать $scope.$apply():

 window.setTimeout(function() {
     $scope.$apply(function() {
        $scope.val = true;
     });
 }, 3000);