title: ng-table header not showing in IE 9
body: <p>I use angularjs and the ng-table directive (<a href="http://bazalt-cms.com/ng-table/" rel="nofollow noreferrer">http://bazalt-cms.com/ng-table/</a>) to build a web application. While the table control implemented in the ng-table directive works fine in Chrome and Firefox, the table header is not showing up in Internet Explorer 9. The behaviour is reproduceable e.g. with example 1 of the ng-table doc (<a href="http://bazalt-cms.com/ng-table/example/1" rel="nofollow noreferrer">http://bazalt-cms.com/ng-table/example/1</a>).</p>
  
  <p>By debugging the examples I saw that the template which is used for the header part of the table is not loaded correctly in IE9. It should look like this (output from chrome):</p>
  
  <p>(bigger image)
  <a href="http://abload.de/img/ngtablechromehwfts.png" rel="nofollow noreferrer">http://abload.de/img/ngtablechromehwfts.png</a></p>
  
  <p><img src="https://i.stack.imgur.com/SzkvJ.png" alt="ngTable Chrome"></p>
  
  <p>But the result in IE9 is this:
  (bigger image) <a href="http://abload.de/image.php?img=ngtableietepeu.png" rel="nofollow noreferrer">http://abload.de/image.php?img=ngtableietepeu.png</a>
  <img src="https://i.stack.imgur.com/NIvwR.png" alt="ngTable IE"></p>
  
  <p>The <code>&lt;thead&gt;</code> - tag uses ng-include to load its child-nodes from a template. But IE cuts out the <code>&lt;tr&gt;</code> and <code>&lt;th&gt;</code> tag from the template which leads to the problem. The <code>&lt;div&gt;</code> again, which is child of the <code>&lt;th&gt;</code> element is displayed. I assume that this is happening because IE somehow "checks" the template code and finds a <code>&lt;tr&gt;</code> and <code>&lt;th&gt;</code> element without a corresponding <code>&lt;table&gt;</code> element and thus removes the tags.</p>
  
  <p>Does anyone know how I can avoid this removal of elements? Is it somehow related to the IE compatibility mode? I played around with the IE compatibility mode and document mode and could sometimes see that the elements don't get removed. But I could not reproduce this.</p>
  
  <p>The template that is included in the <code>&lt;thead&gt;</code> element is:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;tr&gt;
      &lt;th ng-repeat="column in $columns"
          ng-class="{
                      'sortable': parse(column.sortable),
                      'sort-asc': params.sorting()[parse(column.sortable)]=='asc',
                      'sort-desc': params.sorting()[parse(column.sortable)]=='desc'
                    }"
          ng-click="sortBy(column)"
          ng-show="column.show(this)"
          ng-init="template = column.headerTemplateURL(this)"
          class="header {{column.class}}"&gt;
  
          &lt;div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)"&gt;&lt;/div&gt;
          &lt;div ng-if="template" ng-show="template"&gt;&lt;div ng-include="template"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/th&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>But a simpler template has the same effect. <code>&lt;tr&gt;</code> and <code>&lt;th&gt;</code> get removed in IE9, the <code>&lt;div&gt;</code> will be included in the DOM:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;tr&gt;
      &lt;th&gt;
          &lt;div&gt;test text&lt;/div&gt;
      &lt;/th&gt;
  &lt;/tr&gt;
  </code></pre>