Does removing a DOM element remove the associated scope?

Question

In Angular, scopes are associated with DOM elements. If you call `$element.remove()`, does `$element.scope().$destroy()` end up getting called as well? Or is the developer responsible for cleaning up scopes himself? This makes me think that it removing a DOM element should automatically remove the scope: angular.js ``` ///////////////////////////////////////////// // jQuery mutation patch // // In conjunction with bindJQuery intercepts all jQuery's DOM destruction apis and fires a // $destroy event on all DOM nodes being removed. // ///////////////////////////////////////////// function JQLitePatchJQueryRemove(name, dispatchThis) { /* ... */ } ```

Accepted Answer

EDIT:

Angular 1.2.X now patches JQuery to call $destroy

However, I haven't tested to see if I got the same results I saw before.

(Thanks @KumarHarsh for pointing this out in the comments)

Old answer (Angular 1.0.X):

No, `$element.remove()` doesn't remove the scope, presumably because the scope is still referenced by other scopes.

As proof you can remove a scoped element from a nested controller, then load the scope from the parent controller and check `$$childHead` to see the child scope still exists.

Here is a plunk to demonstrate

Also, you can view the scopes in memory using the Batarang plugin for Chrome

Does removing a DOM element remove the associated scope?

Solution

Problem