Angularjs UI collapse in ngRepeat

Question

I am trying to embed some collapsible panels in a ngRepeat. This is what I have:

<div class="panel panel-default" ng-repeat="element in elements">
 <div class="panel-heading">
  {{element.name}}
  <button value="Collapse" ng-click="element.isCollapsed != element.isCollapsed"></button>
 </div>
 <div class="panel-body" collapse="element.isCollapsed">
  Content
 </div>
</div>

Now, when I click on the button, the collapse doesn't work. From the documentation I understand that the repeater creates a scope for every element. And the attribute collapse of the panel-body should get the same scope, right? It seems that the scope.$watch in the collapse directive is not working properly. Or maybe I'm doing something wrong?

Thanks

Answer 1

Please check the updated fiddle: http://jsfiddle.net/nZ9Nx/9/

I have created the app and injected ui-bootstrap in it to have the collapse working.

angular.module('test', ['ui.bootstrap']);

Answer 2

The problem is

<div class="panel-heading" toggle target="collapseOne">

It's hardcoded in the example. Replace with...

<div class="panel-heading" toggle target="collapse{{ $index + 1 }}">

Also update this tag

<div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">

Here is a full example

<div ng-repeat="item in awesomeThings">
    <div class="panel panel-default">
        <div class="panel-heading" toggle target="collapse{{ $index + 1 }}">
            <h4 class="panel-title">
                {{ item }}
            </h4>
        </div>
        <div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">
            <div class="panel-body">
                <!-- ... -->
            </div>
        </div>
    </div>
</div>