title: Ng-if inside ng-template does not work
body: <p>I created a component and I am trying to make the component's template dynamic, that is, for some condition the parent tag should be a div, otherwise it should be an anchor tag.</p>
  
  <p>I have been trying to use ng-if but somehow it wont work. Here is a code snippet. For some reason, even if the ng-if is true, the nested div (.testDiv .testThumbnail) will be undefined and this will break my component.</p>
  
  <p>I cannot understand why it doesn't find the component even if the ng-if is true. I am new to Angular JS, so maybe I am missing something here? Or there is a better way to dynamically create the component's parent tags according to some condition.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myCardController($window) {
     var element = angular.element(document.querySelector('.testDiv .testThumbnail'));//is undefined
  }
  
  angular.module('myApp').component('myCard', {
   templateUrl: 'testTemplate', ,
   controller: ["$window", myCardController],
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/ng-template" id="testTemplate"&gt;
    &lt;div ng-if="true" 
         class="testDiv"&gt;
         &lt;div role="img" class="testThumbnail"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;a ng-if="false" class="tesstDiv"&gt;same content&lt;/a&gt;
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>