title: How to bind an AngularJS controller to dynamically added HTML?
body: <p>For this scenario, I have a page of HTML with some AngularJS directives, controllers, etc.</p>
  
  <p>Something like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
    &lt;div ng-controller="myCtrl"&gt;
       &lt;ul&gt;&lt;li ng-repeat="item in items"&gt;{{item.name}}&lt;/li&gt;&lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="placeholder"&gt;
       ...new HTML here...
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Notice that there is no <code>ng-app</code> directive on the page.  I am not relying on auto-bootstrapping, but rather I am using the manual bootstrapping method.</p>
  
  <pre><code>angular.bootstrap(document, ['myApp']);
  </code></pre>
  
  <p>First, I create the module which will be bootstrapped to the document. Then as a dynamically determined list of dependencies are loaded, I attach some services, controllers, etc. Once everything is ready I call the bootstrap method.  </p>
  
  <p>This all works fine, until JavaScript outside of AngularJS appends to the DOM at the <code>...new HTML here...</code> location. The new HTML is not processed by AngularJS.  </p>
  
  <p>My understanding is that you need to call <code>$scope.$apply()</code> or <code>$digest()</code> or something to get AngularJS to recognize the new HTML.  However, in my example there is no controller around the new HTML coming in.  The incoming HTML may look like this:</p>
  
  <pre><code>  &lt;div ng-controller="myOtherCtrl"&gt;
       &lt;h2&gt;{{model.title}}&lt;/h2&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>In other words, it is relying on a different controller in the app module.  </p>
  
  <ul>
  <li>I can't call the <code>angular.bootstrap</code> method again, because the page is already bound.  </li>
  <li>I can't call <code>$scope.$apply</code> from inside the controller because the whole point is that controller code isn't being called.  </li>
  <li>I don't see a way to get a reference to the controller in order to re-apply or refresh it. </li>
  </ul>
  
  <p>I have read the <a href="http://ify.io/lazy-loading-in-angularjs/">Ifeanyi Isitor lazy loading post</a> and the <a href="http://www.bennadel.com/blog/2553-Loading-AngularJS-Components-After-Your-Application-Has-Been-Bootstrapped.htm">Ben Nadel post</a>, yet they don't seem to address HTML loaded outside the context of an existing controller.</p>
  
  <p>It isn't an option for me to use AngularJS directives to handle the DOM manipulation.  It is a separate part of the architecture which uses ExtJS as the framework for injecting the new DOM elements. This means I can't use ngInclude for example.</p>
  
  <p>It would seem like I could just call <code>angular.module('myApp').$refresh();</code> or <code>.$apply()</code> but that isn't an option.  What am I missing?</p>