Angular UI bootstrap: Open first accordion with ng-repeat

The problem:

I was using accordion directive in Angular UI Bootstrap 0.1.2. Reading the demo page, there is an example to show how to open the first-accordion-group by default:

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

This works fine for static content, but it fails to work with dynamic content using ng-repeat. In other words, it DOES NOT simply 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 follow:

    <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 accordian to be closed by default.

Let me know if it doesn’t work for you☺