AngularJS - $ scope не привязывается к DOM

Question

Я очень новичок в Angular и как практика, я строю небольшой веб-сайт. На одной из страниц я хочу показать, сколько кнопок было нажато привязкой данных. Для этого, у меня есть этот контроллер

'use strict'; 

angular.module('angularApp') 
    .controller('MyCtrl', function ($scope) { 
    var timer = 0; 

    $scope.clicked = function() { 
     timer++; 
     console.log(timer); 
     return timer; 
    }; 

    $scope.actualTime = $scope.clicked(timer); 
}); 

Как для зрения, у меня есть:

<button type="submit" ng-click="clicked()" class="btn btn-success">Start</button> 
    <p>You clicked {{actualTime}} minutes ago.</p> 

Контроллер привязан к представлению через $ routeProvider.

В идеале, всякий раз, когда я нажимаю на кнопку, значение {{actualTime}} должно увеличиваться. Но это почему-то не так. Насколько мне известно, он должен быть привязан (как к двусторонней привязке данных), поэтому не должно быть функции, которая будет обновлять DOM. Консоль.log обновляется с правильными приращениями, но DOM этого не делает. Кто-нибудь хочет объяснить, как это работает? Я читал ответы здесь, и большинство, если не все из них, слишком технические. Поврежденное объяснение действительно помогло бы. Благодаря!

Answer 1

В вашем коде вы не обновляете переменную «actualTime» при каждом нажатии.

Вы можете обновить переменную двумя способами

1) Вы можете обновить его каждый щелчок в вызываемой функции

http://plnkr.co/edit/o8Jq5jQn0DEg0mN2r7Zd

HTML

<button type="submit" ng-click="clicked()" class="btn btn-success"> 
Click  
</button> 
<p>You clicked {{actualTime}} minutes ago.</p> 

JS

var timer=0; 
$scope.actualTime = 0; 
$scope.clicked = function() { 
    timer++; 
    $scope.actualTime = timer; 
}; 

2) Вы также можете обновить его, используя '$ watch'.

HTML

<p>Using $watch service : You clicked {{actualTime2}} minutes ago.</p> 

JS

Если у вас есть varible '$ scope.actualTime' определены, то когда-либо переменная изменения '$ scope.actualTime', присвоить его новое значение «$ scope.actualTime2 '

$scope.$watch('actualTime',function(newval, oldval){ 
    $scope.actualTime2 = newval; 
})