Как обновить DOM при изменении значения в контроллере

У меня есть функция getData, которая просто увеличивает значение счетчика var.

Всякий раз, когда происходит инкремент, я хочу, чтобы angular автоматически обновлял его внутри div

Я пробовал ng-bind, но он работает только при нажатии на элемент формы.

enquire.controller('DisplayEnquiries', function($scope){
$scope.getData = function(){
    console.log('Run ' + $scope.counter);
    $scope.counter;
    if($scope.counter == undefined || $scope.counter == null){
        $scope.counter = 1
        $scope.counter++;
    }
    else{
        $scope.counter++;
    }
    console.log('Execute ' + $scope.counter);
    $scope.count = $scope.counter;
}
    setInterval($scope.getData, 1000);
});

HTML 

<div class="col-sm-5" ng-controller="DisplayEnquiries">
        <h4>Unread User Queries</h4>
        <p>
            Count : <span ng-bind="count"></span>
        </p>
    </div>
1 2
angularjs angularjs-scope angularjs-ng-model ng-bind

1 ответ:

Angular имеют дайджест-систему, которая помогает обеспечить обновленную привязку над видом. Но когда вы обновили угловые привязки из внешнего мира angular, например any (async) event, angular не понимает изменения, результирующий цикл дайджеста не получит огня для обновленной привязки. Поэтому в вашем случае вы запускаете setInterval (асинхронное событие), которое обновляет привязку.

В таком сценарии вам нужно вручную запустить цикл дайджеста ($scope.$apply()/$scope.$digest()) для поиска изменений и обновления привязки соответственно по представлению. Но все же я бы предпочел, чтобы вы использовали $interval сервис, который предоставляется из коробки, которая делает ту же работу, что и setInterval & которая заботится о цикле дайджеста, чтобы держать привязку в синхронизации.

Вы должны использовать $interval вместо setInterval 

$interval($scope.getData, 1000);
4