title: Angular 1.5 Components difference between $onDestroy & $scope.$destroy()
body: <p>I'm trying to understand the difference between the controller's <strong>$onDestroy</strong> method and <strong>$scope.$destroy()</strong>. </p>
  
  <p>Definition says that $onDestroy is called when the containing scope of the component needs to be destroyed. But isn't it the same case with $scope.$destroy()?</p>
  
  <p>As per the plunker I've created at <a href="https://plnkr.co/edit/9RlS8OLxAoyK80WPMJaN?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/9RlS8OLxAoyK80WPMJaN?p=preview</a> ,</p>
  
  <pre><code>&lt;div ng-controller="ParentController"&gt;
      &lt;button ng-click="func()"&gt;Parent&lt;/button&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;div ng-controller="ChildController"&gt;
        &lt;button ng-click="childFunc()"&gt; Child &lt;/button&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;comp&gt; &lt;/comp&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've noticed two situations.</p>
  
  <ol>
  <li><p>When I call $destroy() from the Parent or Child controller, both $onDestroy and $scope.$on('$destroy') events are triggered in the Component. This makes sense as the containing scope of the component is destroyed when the Parent scope is destroyed. However, I'm still able to click the 'Component FUNC' button and call the function associated with it. Why does this happen?</p></li>
  <li><p>When I call $destroy() from the Component itself, then only the $scope.$on('destroy') event is triggered leaving behing the $onDestroy untriggered. Also, I'm not able to access the 'Component FUNC' button as I was able to do in Case #1.</p></li>
  </ol>
  
  <p>Can someone please explain me the difference in the two cases? </p>
  
  <p>This is not a real life use-case but something that I wanted to understand.</p>
  
  <p>Thank you.</p>