title: AngularJS not cleaning child scope created by ng-include
body: <p>I have the following use case - I provide a dialog service where I put a different content depending on the context. In the service method i manually compile a dom element and use it to display dialog using jquery ui. The code is the following:</p>
  
  <pre><code>var _view = jQuery('&lt;div id="config-dialog"&gt;&lt;span ng-include="\'' +  $scope.configView + '\'" ng-controller="' + $scope.configController + '"&gt;&lt;/span&gt;&lt;/div&gt;');
  var _compiled = $compile(_view.contents())($scope);
  </code></pre>
  
  <p>And then I fire a scope event that should be handled by a scope function defined in the controller</p>
  
  <pre><code>$scope.$broadcast('config-open', $scope.config);
  </code></pre>
  
  <p>then I open the dialog and the user performs something and closes the dialog. When the dialog gets closed i remove the "config-dialog" element from the DOM. Like this:</p>
  
  <pre><code>$(this).dialog("destroy");
  jQuery('#config-dialog').remove();
  </code></pre>
  
  <p>However the next time the dialog gets opened and a new controller gets instantiated i see that the 'config-open' gets handled twice, when open the dialog again it gets handled 3 times. That means the scope attached to the ng-include that I dynamically create is not destroyed. I've debugged with Batarang and saw that really the child scope created by ng-include is not cleaned. AFAIK AngularJS scopes are associated to dom elements and when I remove the element, the scope should be garbage collected but this doesn't happen.
  My question is - is AngularJS supposed to clean up the scope in my case. What am I doing wrong and is there a more proper way to implement my use case?</p>