I have written a tabset in the body of an html page. However, only a portion show up and the others are presented near the header as list items represented by a bullet point. I know I have everything installed correctly, as on another page I have something very similar. When tampering with the code, I cannot seem to figure it out. In the console log of inspect element, I receive the error "Error: [$compile:ctreq] http://errors.angularjs.org/1.5.5/$compile/ctreq?p0=tabset&p1=tab
". Also, in the inspection of the compiled html, I can see the both "missing" tabs as this:
<li class="ng-isolate-scope" ng-class="{active: active, disabled: disabled}"></li>
<a class="ng-binding" href="" ng-click="select()" tab-heading-transclude="">
</a>
Here is the code snippet in question:
<tabset id="center" align="center">
<tab>
<tab-heading style="text-align:left">
<span ng-click="showme=0" style="text-align:left">Tab0</span>
</tab-heading>
<% include content0 %>
</tab>
<tab>
<tab-heading>
<span ng-click="showme=1" style="text-align:left">Tab1</span>
</tab-heading>
<!-- end Tab0, Begin Tab1 -->
<% include content1 %>
</tab>
<tab>
<tab-heading>
<span ng-click="showme=2" style="text-align:left">Tab2</span>
</tab-heading>
<!-- End Tab2, begin Tab3 -->
<% include content2 %>
</tab>
<tab>
<tab-heading>
<span ng-click="showme=3" style="text-align:left">Tab3</span>
</tab-heading>
<!-- End Tab3, Begin Tab4 -->
<% include content3 %>
</tab>
<tab>
<tab-heading>
<span ng-click="showme=4" style="text-align:left">Tab4</span>
</tab-heading>
<!-- End of Tab4, Begin Tab5 -->
<%include content4%>
</tab>
<tab>
<tab-heading>
<span ng-click="showme=5" style="text-align:left">Tab5</span>
</tab-heading>
<!-- End Tab5, begin Tab6 -->
<% include content5 %>
</tab>
</tabset>
EDIT: When removing Tab4, it works. I have analyzed the content of Tab4 and there is nothing illegal. I am still rather stumped.