After stumbling upon an Angularjs example online, I found myself perplexed. The code snippet in question is as follows:
angular.module("testApp",[]).controller("testCtrl", function($scope){
var data = "Hello";
$scope.getData = function(){
return data;
}
$scope.setData = function(newData){
data = newData;
}
});
The corresponding view is outlined below:
<html ng-app = "testApp">
<head>
<script src="lib/Angular.js"></script>
<script src = "foo.js"></script>
</head>
<body ng-controller="testCtrl">
<div ng-click="setData('Hello Hello')">{{getData()}}</div>
</body>
</html>
My inquiry revolves around how Angular triggers the getData() method within the view. Since the click event modifies a private variable that isn't attached to $scope, and therefore not being watched for changes, how does Angular know when to call getData() in the view? I understand this may seem like a basic question, but any guidance would be greatly appreciated. Thank you!