Angular UI bootstrap: Open first accordion with ng-repeat

February 20, 2015

The problem:

I was using the 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:

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:

My Solution:

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

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 it doesn’t work for you☺

Originally published at on December 24, 2014.

Written by Victor Leung who is a keen traveller to see every country in the world, passionate about cutting edge technologies. Follow me on Twitter