title: destroy directive/child scope on scope destroy
body: <p>I have a directive that compiles another directive and attaches it to the body with the same scope passed. This will not be the same location as the "parent" directive. </p>
  
  <p>When the parent directive gets destroyed is there some way to have the child directive and scope destroy as well? I ask because after inspecting the DOM the child directive is still there.</p>
  
  <p>Currently I hook into the parents $destroy event but was curious if it could be handled automatically. </p>
  
  <p><strong>jsFiddle:</strong> <a href="http://jsfiddle.net/FPx4G/1/" rel="noreferrer">http://jsfiddle.net/FPx4G/1/</a></p>
  
  <p>The child stays there as you toggle the parent, but i'd like to to be destroyed. What would be the best method to do that?</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div ng-app="app"&gt;
      &lt;div ng-controller="ParentCtrl"&gt;
          &lt;button data-ng-click="toggleParent()"&gt;Toggle Parent&lt;/button&gt;
          &lt;div data-ng-switch data-on="displayDirective"&gt;
              &lt;div data-ng-switch-when="true"&gt;
                  &lt;div class="parentDirective"&gt;Parent Directive&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>javascript:</strong></p>
  
  <pre><code>angular.module('app', [])
      .directive("parentDirective", function($compile){
          return {
              restrict: 'C',
              link: function(scope, element){
                  var secondDirective = angular.element(document.createElement("div"));
                  secondDirective.addClass("childDirective");
  
                  document.body.appendChild(secondDirective[0]);
  
                  $compile(secondDirective)(scope);
              }
          }
      })
      .directive("childDirective", function(){
          return {
              restrict: 'C',
              template: '&lt;div&gt;Child Directive&lt;/div&gt;',
              link: function(scope, element){
                  scope.$on("destroy", function(){
                     alert(1); 
                  });
              }
          }
      });
  
  
  function ParentCtrl($scope){
     $scope.displayDirective = true;
      $scope.toggleParent = function(){
          $scope.displayDirective = !$scope.displayDirective;
      }
  }
  </code></pre>
  
  <p>Normally, I'd just have the sub element within the original directive's template so that it's positioned correctly. The issue really comes down to dealing with z-index. The parent element is in a container that can be scrolled, so the child (in one case a <em>custom</em> dropdown) would be hidden/cut off if it was larger then the container. To combat this I instead create the actual child in the document body and position it relative to the parent. It would also listen in on scroll events to reposition itself. I have that all working and is just fine. It's what happens when I need to delete the parent... the child is still there.</p>