title: Why is the content of an ng-include dynamically loaded template not available via DOM selectors?
body: <p>Here's a jsfiddle showing the problem: <a href="http://jsfiddle.net/yRLKe/5/" rel="nofollow">http://jsfiddle.net/yRLKe/5/</a></p>
  
  <p>One button compiles before injecting to the DOM, the other one injects before compiling. I did both to make sure that how I compile wasn't the cause of the problem.</p>
  
  <p>Whichever button you click, check the console output and you'll see that the actual template's contents are not available when selecting from the DOM.</p>
  
  <p>So the question is firstly why? - why does it behave this way?
  but <strong>most importantly how</strong>? - how can I get access to the actual loaded template's HTML via DOM selectors?</p>
  
  <p>Here's the template:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="template1.html"&gt;
     &lt;div&gt;This is template 1!&lt;/div&gt;
     &lt;div id="test"&gt;Hello {{name}}&lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's the controller: </p>
  
  <pre><code>myApp.controller('MyCtrl', function($scope) {
    $scope.name = 'Superhero';
    $scope.template = {url:'template1.html'};
    $scope.clickButton1 = function(){
      $scope.$emit('buttonClicked1');  
    };
    $scope.clickButton2 = function(){
      $scope.$emit('buttonClicked2');  
    };
  });
  </code></pre>
  
  <p>Here's the directive:</p>
  
  <pre><code>myApp.directive('compileBeforeInsert', function($compile){
    return function(scope, element, attrs){
      scope.$on('buttonClicked1',function(ev){
          var container = $('#container');
          container.html('&lt;div ng-include src="template.url" id="template"&gt;test1&lt;/div&gt;');
          $compile(container)(scope);
          console.log('before');
          console.log($('#template').html());
      });    
    }
  });
  </code></pre>
  
  <p>This directive outputs "test1" to the console whereas I would expect it to output "Hello Superman!".</p>