I understand that when I have <p>{{abc}}<p> or {{ng-repeat="item in list"}} angularjs will set watcher for $scope.abc and $scope.list, thus their value will be checked during every digest loop.
However when I am using ng-class directive with a function, I could not figure out what expression is angular watching
angular.module("app",[]).controller("control",function($scope){
var clicked = false;
// this is the variable I would watch for and returnString is the call back...
// but how could angular possibly know??
$scope.toggle = function(){
clicked = !clicked;
}
$scope.returnString = function(){
if(clicked){
return 'text-success';
}
return 'text-danger';
}
});<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
</head>
<body ng-controller="control">
<button ng-click="toggle()">click</button>
<h1 ng-class="returnString()">hello world</h1>
<!--ng-class="clicked?'text-success':'text-danger'" this way angular knows what to watch...but what if I give it a function???-->
</body>
</html>in the html...angular does not know what value "returnString()" relys on, how could the framework set a watcher? or does angular simply run ng-class expression after every digest loop?