title: How do you explicitly destroy a directive?
body: <p>In my angular app, I have a directive. If I remove this one with DOM Manipulation (e.g. jQuery empty()), destroy event isn't called:</p>
  
  <pre><code>myApp.directive('joe', function()
  {
      return {
          restrict: 'E',
          replace: true,
          link: function(scope, element, attrs)
          {            
              element.html("Hi !");
  
              element.bind('$destroy', function() 
              {
                  console.log("Bye");
              });
          }
      };
  });
  </code></pre>
  
  <p>Demo: <a href="http://jsfiddle.net/ymx4N/" rel="nofollow">http://jsfiddle.net/ymx4N/</a></p>
  
  <p>Furthermore, if I remove &amp; add a lot of times this directive with empty() &amp; appendTo() , the number of nodes <em>always</em> increase. This means that all directives are always in memory, and the garbage collector never remove these nodes.</p>
  
  <p>Maybe this is a "normal" behavior, because AngularJS can't know when I remove/change DOM nodes directly. However, is it possible to destroy explicitly a directive ? How could I add and remove directives by DOM manipulation, without this kind of """memory leak""" ?  </p>
  
  <p>Thanks !</p>