angular-ui IE8 accordion

Question

Using the Angular-UI bootstrap accordion in IE8 the tabs do not expand. Here is the error I am receiving using IE 8's F12

 Error: Unexpected call to method or property access.undefined 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 

Has anyone had a similar issue and been able to resolve it?

Answer 1

IE8 won't recognize custom elements. If you need to use the accordion directive as an element instead of an attribute, you'll have to define the element so IE won't complain. This simple script will do the trick.

<script type="text/javascript">
    document.createElement('accordion');
    document.createElement('accordion-group');
    document.createElement('accordion-heading');
</script>

Otherwise, just use the directive in its attribute form.

Answer 2

Looks like the main issue was IE not liking <accordion> used <div accordion></div> instead

Answer 3

Another gotchya that I just encountered is that you can't put the ng-controller on the same element as <div accordion> in ie8. Took me a lot of trail-and-error to figure that out.

I had to replace

<div accordion ng-controller="MyCtrl">
    ...
</div>

with

<div ng-controller="MyCtrl">
    <div accordion>
        ...
    </div>
</div>