title: Use ng-if with ng-include to recreate scope
body: <p>I have an <code>ng-include</code> inside of an <code>ng-repeat</code>:</p>
  
  <pre><code>&lt;div ng-repeat="tab in tabs" ng-show="tab.active"&gt;
    &lt;div ng-include="tab.url" class="no-padding no-margin"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I only want the contents loaded into the DOM if the user clicks on the tab, so I am using an <code>ng-if</code> around the <code>ng-include</code>:</p>
  
  <pre><code>&lt;div ng-repeat="tab in tabs" ng-show="tab.active"&gt;
      &lt;div ng-if="tab.loaded"&gt;
          &lt;div ng-include="tab.url" class="no-padding no-margin"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This part is working fine. However, I have one tab that requires dynamic content, so each time a user clicks on the tab, I need the scope for that controller to be recreated.</p>
  
  <p>Based on my understanding, I can also use <code>ng-if</code> to remove/recreate DOM elements. According to the <code>ng-if</code> <a href="https://docs.angularjs.org/api/ng/directive/ngIf" rel="nofollow">documentation</a>: </p>
  
  <blockquote>
    <p>The ngIf directive removes or recreates a portion of the DOM tree
    based on an {expression}</p>
  </blockquote>
  
  <p>...</p>
  
  <blockquote>
    <p>when an element is removed using ngIf its scope is destroyed and a new
    scope is created when the element is restored</p>
  </blockquote>
  
  <p>I've added the code to set the <code>loaded</code> property of the dynamic tab to false which should remove it's contents from the DOM. </p>
  
  <p>I then set it back to true, so that the scope is recreated, but I cannot get the scope to be created again.</p>
  
  <p>Is my approach correct, or is there something besides <code>ng-if</code> that I can use for my purpose.</p>