It’s common for developers to want to run angular’s compilation over some piece of html inside a directive. However, if you are not careful, you can easily cause memory leaks.

Here is an example of code that may leave behind unneeded child scopes:
// in your directive's link function, you do something like this
var content = $compile(template)(scope); // compile and link to the current scope
element.append(content); // add to the DOM

// ... the later, we want to update the content of the element ...

var newContent = $compile(template2)(scope);
content.replaceWith(newContent);

// While replaceWith does remove the old html, it does not remove any of the scopes that may have been added the first time we did compile/link on the old template.
This is a better way to do it:
var newScope = scope.$new(); // create a new scope from the current scope
var content = $compile(template)(newScope); // compile and link to the new scope
element.append(content); // add to the DOM

// .. then later, we want to update the content of the element ...

newScope.$destroy(); // destroy the scope and all child scopes
var newScope2 = scope.$new(); // create a new scope
var content2 = $compile(template2)(newScope2); // compile and link
content.replaceWith(content2); // replace the html content with the new content
Also, note that if you want to know when a directive is destroyed to do any kind of additional cleanup, you can add a destroy listener to the element the directive’s link function is called with:
element.on('$destroy', function() {
 .. unhook whatever ..
});

Just remember that you won’t need to unhook jquery events that have been attached on or below the target element, since angular calls .remove() on it, thereby removing all listeners.