title: Memory Leak in official AngularJS UI Bootstrap $modal sample?
body: <p>I'm trying to understand how to avoid memory leaks in AngularJS. There seems to be almost no documentation about what to clean up, which is as one would expect if garbage collection were perfect and omniscient.  However, my reading indicates that it's easy to leave bound DOM elements which prevent garbage collection, this <a href="https://stackoverflow.com/questions/22169888/angular-js-destroy-event-should-i-manually-unbind">StackOverflow answer</a> says that we must manually unbind any bindings set in directives, and on a smaller scale, <a href="http://www.bennadel.com/blog/2548-don-t-forget-to-cancel-timeout-timers-in-your-destroy-events-in-angularjs.htm" rel="nofollow noreferrer">clean up $timeouts as well</a>.  I came across <a href="http://blog.cycle-interactive.com/?p=524" rel="nofollow noreferrer">this article</a>, which instructs me to look for "detached" DOM elements.</p>
  
  <p>Using just the <a href="http://angular-ui.github.io/bootstrap/#/modal" rel="nofollow noreferrer">sample $modal code from the AngularJS UI site</a>, I find numerous sizable detached elements after opening and closing the modal dialog.  It doesn't seem to grow with repeated clicking, but if I have many dialogs, each one leaves its footprint seemingly forever.  I tried setting <code>modalInstance = null</code> after close, but that didn't accomplish anything.</p>
  
  <p>Are detached elements truly bad?  If so, how should the <a href="http://angular-ui.github.io/bootstrap/#/modal" rel="nofollow noreferrer">AngularJS UI sample modal code</a> be modified to eliminate these?</p>
  
  <p>More importantly, are there any simple, clear, instructions for what specifically to clean up when using AngularJS?  It's nice that they provide an $on.$destroy function, but I can't find any clear instructions indicating what I'm responsible for cleaning up, or how to do it.</p>