When does Angular clear the $watch?

Question

I understand that each model that I include in my view enters the digest loop and $watch applied on it, since all Angular applications are basically one page apps. But when does it clear the $watch?

For example, let's say that I have the page view1.html with the template {{view.name1}}. When I switch the route to the page view2.html with the template {{view.name2}}, does the $watch on {{view.name1}} is being unregistered automatically or should I do it manually?

Answer 1

This answer has links to angular scopes source code,

Each scope have a private array $$watchers:

• When the method $watch is called it pushes listeners into $$watchers, see Scope#$watch.
• With each $digest it iterates down all the $$watchers, see Scope#$digest.
• When the scope method $destroy is called it cleans up all it's watchers, see Scope#$destroy
• Each scope also broadcast $destroy to all of it's child scopes either isolated or not, so you'll never have an orphan scope.
• Angular listens for DOM node removal and triggers $destroy for all directive scopes ( that are created within the $compile service), see here

---

Angular automatically calls $destroy on these cases:

• https://github.com/angular/angular.js/blob/v1.3.2/src/ng/directive/ngIf.js#L111
• https://github.com/angular/angular.js/blob/v1.3.2/src/ng/directive/ngInclude.js#L206
• https://github.com/angular/angular.js/blob/v1.3.2/src/ng/directive/ngRepeat.js#L389
• https://github.com/angular/angular.js/blob/v1.3.2/src/ng/directive/ngSwitch.js#L160
• https://github.com/angular/angular.js/blob/v1.3.2/src/ngRoute/directive/ngView.js#L205

---

You'll only need to call $destroy when you manually create scopes ($new / $transclude) and want them to be destroyed before their parent scope.

ngView is probably a good example because you have only one element that is bound to it in your application and that element (with it's scope which often is the rootScope) is never destroyed. So angular automatically creates a new child scope($new) when it enters a route and calls $destroy on it when exists thus flushing all the watchers which were created by that route.

From Scope#$new docs:

$destroy() must be called on a scope when it is desired for the scope and its child scopes to be permanently detached from the parent and thus stop participating in model change detection and listener notification by invoking.

From $compile - transclusion functions docs:

if you intend to add and remove transcluded content manually in your directive (by calling the transclude function to get the DOM and and calling element.remove() to remove it), then you are also responsible for calling $destroy on the transclusion scope.

---

Take this as a rule, If you manually created a scope (with $new or $transclude) and it is not needed anymore but it's parent scope does you need to manually destroy it.