Creating a universal watch callback

Since a multiplicity of AngularJS watchers is so commonly the root cause of performance problems, it is quite valuable to be able to monitor your application's watch list and activity. Few beginner level AngularJS developers realize just how often the framework is doing the dirty checking for them, and having a tool that gives them direct insight into when the framework is spending time to perform model history comparisons can be extremely useful.

How to do it…

The $scope.$watch(), $scope.$watchGroup(), and $scope.$watchCollection() methods are normally keyed with a stringified object path, which becomes the target of the change listener. However, if you wish to register a callback for any watch callback irrespective of the change listener target, you can decline to provide a change listener target, as follows:

// invoked once every time $scope.foo is modified
$scope.$watch('foo', function(newVal, oldVal, scope) {
  // newVal is the current value of $scope...