title: How do I include one angular template in another so that bootstrap classes still work?
body: <p>I have a directive which uses three different templates:</p>
  
  <p><a href="http://jsfiddle.net/edwardtanguay/pLrkya7r/4" rel="nofollow">http://jsfiddle.net/edwardtanguay/pLrkya7r/4</a></p>
  
  <p>These templates each have a panel and I want them to include a header template which is the same for each of them, like this:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="itemMenuTemplateUndefined"&gt;
      &lt;div class = "panel panel-default" &gt; 
          &lt;div ng-include="'itemMenuTemplatePanelHeading'"&gt;&lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;div&gt;Age: {{item.age}}&lt;/div&gt;
          &lt;/div &gt; 
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The included template looks like this:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="itemMenuTemplatePanelHeading"&gt;
          &lt;div class="panel-heading"&gt;{{item.firstName}} &lt;b&gt;{{item.lastName}}&lt;/b&gt; (PROBLEM INCLUDED BUT NO COLOR)&lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is that although it includes the scope variable values and HTML, it doesn't seem to have the same HTML structure which causes e.g. the panel header color not to display.</p>
  
  <p><strong>How can I get this example to work so that it has the same HTML structure as without ng-include so that Bootstrap continues to work?</strong></p>