title: How to destroy scope manually in angularjs if element is removed from javascript?
body: <p>I am inserting angular template to element.
  Consider following example,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    &lt;c ng-controller="ctrl"&gt;
      ...
    &lt;/c&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>if I remove c from javascript. 
  What will be side effects? (scope leaks)
  How to avoid this?</p>
  
  <p>I have used this,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function render() {
      var lastScope = angular.element('c').scope();
              
      if(lastScope) {
          lastScope.$destroy();
      }
  
      $('c').remove();
  
      getTemplate(context + '/c.html', function(template) {
          if (template) {
              angular.element(document).injector().invoke(['$compile', '$rootScope', function($compile, $rootScope) {
                  $('p').append($compile(template)($rootScope));
                  $rootScope.$apply();
              }]);
          } 
      });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>when I click tab render function get called everytime.
  Any other sugestions?</p>