title: Avoid using extra DOM nodes when using nginclude
body: <p>I'm struggling to wrap my mind around how to have an ng-include not use an extra DOM element as I'm building an angular app from a plain-HTML demo. I'm working with pretty slim HTML with fully developed, tightly DOM-coupled CSS (built from SASS) and refactoring is something I want to avoid at all costs.</p>
  
  <p>Here's the actual code:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;div id="wrapper"&gt;
      &lt;header
          ng-controller="HeaderController"
          data-ng-class="headerType"
          data-ng-include="'/templates/base/header.html'"&gt;
      &lt;/header&gt;
      &lt;section
          ng-controller="SubheaderController"
          data-ng-class="subheaderClass"
          ng-repeat="subheader in subheaders"
          data-ng-include="'/templates/base/subheader.html'"&gt;
      &lt;/section&gt;
      &lt;div
          class="main"
          data-ng-class="mainClass"
          data-ng-view&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need <em>&lt;section&gt;</em> to be a repeating element but have its own logic and different content. Both, content and number of repetitions are dependent on business logic. As you can see, putting the ng-controller and the ng-repeat on the <em>&lt;section&gt;</em> element will not work. What would, however, is to insert a new DOM node, which is what I'm trying to avoid.</p>
  
  <p>What am I missing out? Is this best practice or is there a better way?</p>
  
  <hr>
  
  <p><strong>EDIT</strong>: just to clarify as asked in comments, the final HTML I'm trying to generate would be:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;div id="wrapper"&gt;
      &lt;header&gt;...&lt;/header&gt;
      &lt;section class="submenuX"&gt;
          some content from controller A and template B (e.g. &lt;ul&gt;...&lt;/ul&gt;)
      &lt;/section&gt;
      &lt;section class="submenuY"&gt;
          different content from same controller A and template B (e.g. &lt;div&gt;...&lt;/div&gt;)
      &lt;/section&gt;
      &lt;section class="submenuZ"&gt;
          ... (number of repetitions is defined in controller A e.g. through some service)
      &lt;/section&gt;
  
      &lt;div&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The reason I want to use the same template B (subheader.html), is for code cleanliness. I conceive subheader.html to have some kind of ng-switch in order to return dynamic content. </p>
  
  <p>But basically, the underlaying quiestion is: <em>is there a way to include the contents of a template transparently, without using a DOM node?</em></p>
  
  <hr>
  
  <p><strong>EDIT2</strong>: The solution needs to be reusable. =)</p>