ng-table header not showing in IE 9

Question

I use angularjs and the ng-table directive (http://bazalt-cms.com/ng-table/) 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 (http://bazalt-cms.com/ng-table/example/1).

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):

(bigger image) http://abload.de/img/ngtablechromehwfts.png

But the result in IE9 is this: (bigger image) http://abload.de/image.php?img=ngtableietepeu.png

The <thead> - tag uses ng-include to load its child-nodes from a template. But IE cuts out the <tr> and <th> tag from the template which leads to the problem. The <div> again, which is child of the <th> element is displayed. I assume that this is happening because IE somehow "checks" the template code and finds a <tr> and <th> element without a corresponding <table> element and thus removes the tags.

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.

The template that is included in the <thead> element is:

<tr>
    <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}}">

        <div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)"></div>
        <div ng-if="template" ng-show="template"><div ng-include="template"></div></div>
    </th>
</tr>

But a simpler template has the same effect. <tr> and <th> get removed in IE9, the <div> will be included in the DOM:

<tr>
    <th>
        <div>test text</div>
    </th>
</tr>

Answer 1

I also have this issue here. Googling it deeper, found this:

http://goo.gl/jPmcva

Which leads to

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

as read on http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx.

edit:

As we discovered, when angular uses JQLite to process the html elements the error exist, but when it uses jquery the problem is gone. Important thing is to include jquery.js before angular.js, otherwise angular will keep using jqlite. You may want to look at this: Angularjs jqlite append() and jquery append() act differently with <td>