AngularJS - $ scope不绑定到DOM

Question

I'm very new to Angular and as practice, I'm building a small website. On one of the pages, I want to be able to show the number of buttons have been clicked by data binding. For it, I have this controller

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

As for the view, I have:

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

The controller is bound to the view via the $routeProvider.

Ideally, whenever I click on the button, {{actualTime}} value should be incremented. But it doesn't for some reason. As far as I know, it should be binded (as in two-way data binding) so there shouldn't have to be a function that will update the DOM. The console.log updates with the correct increments, but the DOM doesn't. Anyone wanna explain how this works? I've read answers here and most, if not all of them, are too technical sounding. A dumbed down explanation would really help. Thanks!

Answer 1

In you code you are not updating the variable 'actualTime' on every click.

You can update the variable in two ways

1) You can update it for every click with in the called function

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) You can also update it using '$watch' also.

HTML

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

JS

If you have a varible '$scope.actualTime' defined, then when ever the variable '$scope.actualTime' changes, assign its new value to '$scope.actualTime2'

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