angularjs - Avoid using extra DOM nodes when using nginclude -

i'm struggling wrap mind around how have ng-include not use dom element i'm building angular app plain-html demo. i'm working pretty slim html developed, tightly dom-coupled css (built sass) , refactoring want avoid @ costs.

here's actual code:

<div id="wrapper">     <header         ng-controller="headercontroller"         data-ng-class="headertype"         data-ng-include="'/templates/base/header.html'">     </header>     <section         ng-controller="subheadercontroller"         data-ng-class="subheaderclass"         ng-repeat="subheader in subheaders"         data-ng-include="'/templates/base/subheader.html'">     </section>     <div         class="main"         data-ng-class="mainclass"         data-ng-view>     </div> </div> 

i need <section> repeating element have own logic , different content. both, content , number of repetitions dependent on business logic. can see, putting ng-controller , ng-repeat on <section> element not work. would, however, insert new dom node, i'm trying avoid.

what missing out? best practice or there better way?

---

edit: clarify asked in comments, final html i'm trying generate be:

<div id="wrapper">     <header>...</header>     <section class="submenux">         content controller , template b (e.g. <ul>...</ul>)     </section>     <section class="submenuy">         different content same controller , template b (e.g. <div>...</div>)     </section>     <section class="submenuz">         ... (number of repetitions defined in controller e.g. through service)     </section>      <div>...</div> </div> 

the reason want use same template b (subheader.html), code cleanliness. conceive subheader.html have kind of ng-switch in order return dynamic content.

but basically, underlaying quiestion is: is there way include contents of template transparently, without using dom node?

---

edit2: solution needs reusable. =)

some of other answers suggest replace:true, keep in mind replace:true in templates marked deprecation.

instead, in an answer similar question, find alternative: allows write:

<div ng-include src="dynamictemplatepath" include-replace></div> 

custom directive:

app.directive('includereplace', function () {     return {         require: 'nginclude',         restrict: 'a', /* optional */         link: function (scope, el, attrs) {             el.replacewith(el.children());         }     }; }); 

(cut'n'paste other answer)