AngularJS - remove bindings to avoid memory leaks

Question

What is the proper way in AngularJS to disconnect bindings?

I have a none-angular application which is loading a component that uses angularjs to do data-binding. At some point I want to destroy the component and want to be sure that there are no memory leaks. How do I tell angular to remove all event listeners from that part of the DOM?

Would $(node).remove() do the trick, or does angular do other things in memory that need to be cleaned up...? Any other tips on avoiding mem-leaks in angular would be appreciated.

Answer 1

Just removing a DOM element that has a Scope with something like remove() will not get rid of the Scope in memory. You can confirm this by removing an element and looking in Batarang, or by getting the parent scope and examining it's children. You'll see the scope is still there.... So you'll also want to call $destroy() on the Scope itself.

More information about $destroy() can be found here.

EDIT: One thing I'm not sure of, is if it deletes the scope entirely, or just disconnects it and lets JavaScript GC take care of the rest.