title: AngularJS - load dynamic template HTML within directive
body: <p>I have a directive which loads content from an external HTML file.  Passed into this directive is some scope data which is used in the rendering of that HTML fragment.  e.g.</p>
  
  <p><code>&lt;div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}"&gt;</code></p>
  
  <p><code>&lt;!-- remainder of content here --&gt;</code></p>
  
  <p><code>&lt;/div&gt;</code></p>
  
  <p>What I would like to do within this directive is to load a further HTML partial within this based on the original scope data passed into the directive.  I can't seem to get this to work, but it should be something along the lines of the following:</p>
  
  <p><code>&lt;div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}"&gt;</code></p>
  
  <p><code>&lt;!-- remainder of content here --&gt;</code></p>
  
  <p><code>&lt;div ng-include="partials/{{obj}}.html&gt;&lt;/div&gt;</code></p>
  
  <p><code>&lt;/div&gt;</code></p>
  
  <p>Using this, the file doesn't get included, but I don't get any errors either.  Can anybody assist me here?</p>
  
  <p><strong>NB</strong>: I read <a href="https://stackoverflow.com/questions/13422966/how-to-specify-model-to-a-nginclude-directive-in-angularjs">this</a>, which is a similar issue, but hasn't helped me.</p>
  
  <p><strong>UPDATE</strong> - I noticed in Chrome dev tools that the URL is being resolved as expected, but the file contents are not getting included.  I thought from the docs that <code>ng-include</code> loaded and compiled the requested fragment, so I was expecting this to work.</p>