Imagine you have an object in the global scope (yes, I know it's not ideal but just for demonstration purposes) and you wish to monitor a property of that object using Angular JS.
var person = {
name: 'John Doe'
};
var app = angular.module('app', []);
app.controller('watchController', function ($scope) {
$scope.$watch('person.name', function () {
alert('Name has changed');
});
$scope.doWatch = function () {
person.name = new Date().toString();
};
});
Here is the corresponding HTML:
<div ng-app='app'>
<div ng-controller='watchController'>
<input type='button' value='Invoke' ng-click='doWatch()' />
</div>
</div>
How can this be achieved? The current code snippet is not functioning correctly. Check out this JSFiddle link.