title: How to test angular $destroy event on a directive?
body: <p>The directive (isolated scope, transcluded, replaced) inserts a mask into the <code>&lt;body&gt;</code>.</p>
  
  <pre><code>var mask = angular.element('&lt;div id="mask"&gt;&lt;/div&gt;');
  
  $document.find('body').append(mask);
  
  scope.$on('$destroy', function() {
      mask.remove();
  });
  </code></pre>
  
  <p>I am trying to test this case with a simple broadcast on the scope:</p>
  
  <pre><code>var $document, scope, element, rootScope;
  
  beforeEach(inject(function($compile, _$document_, $rootScope, $injector) {
      rootScope = $injector.get('$rootScope');
      scope = $rootScope;
      $document = _$document_;
      mask = $document.find('#mask');
      element = $compile(angular.element('&lt;overlay id="derp"&gt;&lt;/overlay&gt;'))(scope);
  }));
  
  it('should remove mask when casting the $destory event', function (done) {
      scope.$broadcast('$destroy');
      scope.$digest();
      expect($document.find('#mask').length).toBe(0);
  });
  </code></pre>
  
  <p>Any idea why this doesn't work?</p>