ng-template not working in IE8 in nested list

Question

I have the following code (jade)

script(type="text/ng-template" id="carousel.html")
    include carousel.html

Where carousel.html has a recursively nested list:

<ul>
    <li ng-repeat="step in steps">
        {{step}}
        <ul ng-include="'substeps'"></ul>
    </li>
</ul>

Where substeps is:

<script type="text/ng-template" id="substeps">
    <li ng-repeat="step in step.substeps>
        {{step}}
        <ul ng-include="'substeps'"></ul>
    </li>
</script>

Basically as long as there are substeps, the ng-repeat will add them as nested lists. This works in all browsers except for IE8. Is there anything I'm overlooking? Maybe a bug in ng-template in IE8?

Answer 1

The fact that I was using Jade to include the carousel hid the fact that I had created nested script tags. The substeps ng-template was inside the carousel.html template. Apparently Chrome is okay with this while IE8 (and maybe others that I didn't check) are not okay with this because it's invalid HTML. Moving the substeps template out of carousel.html fixed it.