I have been attempting to incorporate collapsible panels within an ngRepeat loop. Below is the code I have been using:
<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>
However, upon clicking on the button, the collapsing functionality does not work as expected.
After reading through the documentation, it appears that a new scope is created for each element within the repeater.
Shouldn't the collapse attribute of the panel-body also inherit this scope?
It seems like the scope.$watch within the collapse directive may be experiencing some issues.