title: Scope $destroy event called when initializing new controller
body: <p>I'm currently working on a project using Angular JS where i need to be able to initialize and destroy controllers and scopes to be able to show different content in the same modal. The problem i have encountered is that when i have compiled the new controller, the $destroy event is triggered instantly and therefore all my watchers on the scope are destroyed.</p>
  
  <p>Controller 1</p>
  
  <pre><code>app.controller('MainCtrl', function($scope, $compile) {
      $scope.model = { name: 'World' };
      $scope.name = "Felipe";
      var DOM = '&lt;div ng-controller="Ctrl2"&gt;{{model}}&lt;input type="text" ng-model="model.name"/&gt;&lt;/div&gt;';
      var newScope = $scope.$new();
      var elem = $compile(DOM)(newScope);
      $('#test1').append(elem);
  });
  </code></pre>
  
  <p>Controller 2 that is being inserted</p>
  
  <pre><code>app.controller('Ctrl2', function($scope) {
      $scope.model = { name: 'World2' };
      $scope.name = "Felipe2";
      $scope.$watch('$destroy', function() {
          $('#errorMessage').html('Scope was destroyed');
          console.log('destroyed scope');
      });
  });
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
      &lt;div id="test1"&gt;&lt;/div&gt;
      &lt;div id="errorMessage"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have reproduced the error in a minimal <a href="http://plnkr.co/edit/Wh3fmr0xNgpeP34xNH7y?p=preview" rel="nofollow">plunker</a>, where the text "Scope was destroyed" is showed in the result when $destroy has been called on the inserted controllers' scope.</p>
  
  <p>Appreciate any help / workarounds to solve this issue, or guidelines for how i should have gone about it from the beginning.</p>