title: element.find() not working when using templateUrl in directive
body: <p>I am trying to set focus on an input field via a custom directive on a form. This works fine when using the template property in the directive. But when I move the template into a separate html file via <code>templateUrl</code>, <code>element.find()</code> does not find my input fields any more:</p>
  
  <p>The code goes as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Plunker&lt;/title&gt;
      &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainCtrl"&gt;
      &lt;form get-input-by-id="input2"&gt;
        &lt;my-input id="input1"&gt;&lt;/my-input&gt;
        &lt;my-input id="input2"&gt;&lt;/my-input&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The js:</p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
  });
  
  app.directive('getInputById', function() {
    return {
      link: function (scope, element, attrs) {
        //console.log(element);
        var toFocus = element.find('input');
        console.log(toFocus);
        toFocus[1].focus();
      }
    }
  });
  
  app.directive('myInput', function() {
    return {
      restrict: 'E',
      scope: {
        id: "@id",
      },
      // this is not working
      templateUrl: 'template.html',
      // this is working
      //template: '&lt;div&gt;&lt;input id="{{id}}"/&gt;&lt;/div&gt;',
      link: function (scope, element, attrs) {
      }
    }
  });
  </code></pre>
  
  <p>And the template:</p>
  
  <pre><code>&lt;div&gt;
    &lt;input id="{{id}}"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I added both working and not working plunkers:</p>
  
  <p><a href="http://plnkr.co/edit/8KMnWdD3YRnnD5bDZ25n?p=preview" rel="nofollow">This plunker is working</a>.</p>
  
  <p><a href="http://plnkr.co/edit/ywv6BC7brLDeKo0kgFDR?p=preview" rel="nofollow">This plunker is not working</a>.</p>