Angularjs directive remove watch?

Problem

I have a $scope.$watch declared in the controller of a directive. When I change pages and the directive is removed do I have to manually destroy the way? If so how do I detect when the directive has been removed?

Problem courtesy of: Harry

Solution

It depends on the scope, not the directive. If the scope is destroyed, then all its $watchers die with it. On page change your scope'll be destroyed by angular, so you should be safe.

When a scope dies it yields a $destroy event. You can watch it:

$scope.$on('$destroy', callback);

and you can manually detach $watchers from the scope, by calling the function it returns:

var sentinel = $scope.$watch('expression', callback);
sentinel(); // kill sentinel

You can do this with $on too.

Solution courtesy of: Oliver

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.