Angular UI Bootstrap: Opening the First Accordion with ng-repeat

The Problem:

I was using the accordion directive in Angular UI Bootstrap version 0.1.2. On the demo page, there's an example showing how to open the first accordion group by default:

<accordion-group heading="First Header" is-open="true"> </accordion-group>

This works well for static content but fails to operate as expected with dynamic content generated using ng-repeat. In other words, it does not work like this:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups" is-open="true"> </accordion-group>

My Solution:

In the template, bind the is-open property of the accordion as follows:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups" is-open="status.isItemOpen[$index]"> </accordion-group>

And in the controller:

$scope.groups = ['First Header', 'Second Header', 'Third Header'];
$scope.status = { isItemOpen: new Array($scope.groups.length), isFirstDisabled: false };
$scope.status.isItemOpen[0] = true;

Change the value of the last line to false if you prefer the first accordion to be closed by default.

Let me know if this doesn't work for you. 😊