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=""
  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=""
  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. 😊