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

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

Answer 2

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.