title: Angular 1.5 Unit Testing Directive ng-include Template
body: <p>I'm trying to test UI state of a directive that dynamically loads templates via ng-include. I was having issues with the element being undefined and after googling the fix was to simply wrap the compiled element with a parent html element i.e, div. This resolved the undefined element issue but now the element is defined as the comment node instead of the rendered template.</p>
  
  <p><strong>directive</strong></p>
  
  <pre><code>function myDirective(
    return {
      scope: {
        tpl: '@'
      },
      template: '&lt;ng-include src="template"/&gt;',
      link: function(scope, elem, attr, ctrl) {
        if(scope.tpl == 'view') {
          scope.template = 'app/view.tpl.html';
        }
        if(scope.tpl == 'edit') {
          scope.template = 'app/edit.tpl.html';
        }
  </code></pre>
  
  <p><strong>parent template of directive</strong></p>
  
  <pre><code>&lt;my-directive ng-repeat="item in vm.myStuff track by $index" tpl="edit"&gt;
  &lt;/my-directive&gt;
  </code></pre>
  
  <p><strong>spec</strong></p>
  
  <pre><code>describe('myDirective', function() {
    var $rootScope, $compile, element, scope;
  
    beforeEach(inject(function($injector) {
      $rootScope = $injector.get("$rootScope");
      $httpBackend = $injector.get("$httpBackend");
      $compile = $injector.get("$compile");
      element = angular.element('&lt;div&gt;&lt;my-directive ng-repeat="item in vm.myStuff track by $index" tpl="edit"&gt;&lt;/my-directive&gt;&lt;/div&gt;');
      scope = $rootScope.$new();
      // wrap scope changes using $apply
      scope.$apply(function() {
        scope.template = 'app/edit.tpl.html';
        scope.vm = {
          myStuff: [{}, {}]
        };
        $compile(element)(scope);
      });
    }));
    it("edit template save button should be displayed", function() {
      console.log(element.html());
      '&lt;!-- ngRepeat: item in vm.myStuff track by $index --&gt;'
    });
  });
  </code></pre>
  
  <p><strong>output after adding myStuff array</strong></p>
  
  <pre><code>&lt;div&gt;
    &lt;!-- ngRepeat: item in vm.myStuff track by $index --&gt;
        &lt;!-- ngIf: !$last &amp;&amp; item --&gt;
          &lt;my-directive ng-repeat="item in vm.myStuff track by $index" tpl="edit"&gt; 
          &lt;/my-directive&gt;
        &lt;!-- end ngIf: !$last &amp;&amp; widget --&gt;
    &lt;!-- end ngRepeat: item in vm.myStuff track by $index --&gt;
  
        &lt;!-- ngIf: !$last &amp;&amp; item --&gt;
    &lt;!-- end ngRepeat: item in vm.myStuff track by $index --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>UPDATE</h2>
  
  <p>I added the data for <code>ng-repeat</code> but now see the commented directive but not the rendered <code>edit.tpl.html</code> template.</p>