I have placed the accordion inside ng repeater
<div class="row">
<div class="panel-body">
<div class="panel-group" >
<div ng-repeat="p in problems | filter:search"" class="panel panel-default">
<div class="panel-heading" ng-click="GetSolutionForProblemId(p.Id,$event)">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" title="{{ '#collapse-' + p.ProblemId }}" class="">
<i class="fa fa-bookmark text-success fa-2x" style="height: 50px; margin-left: -30px; margin-top: -15px; position: absolute"></i> {{p.Title}}
</a>
</h4>
<img src="../../../Content/images/no-profile-image.jpg" alt="" width="40" height="40" />
<label class="text-wet-ashpalt" style="font-weight: 200; font-size: 12px;"> {{p.User.FullName}}, {{p.CreatedDate}}</label>
</div>
<div id="{{ 'collapse-' + p.ProblemId }}" class="panel-collapse" style="height: auto;display:none;">
<div class="panel-body" >
<div ng-repeat="s in solution">
<i class="fa fa-check-circle text-success fa-2x" style="height: 40px; margin-left: -25px; position: absolute"></i>
<h4 class=" margin-top padding-left " style="padding-top: 5px;">Solution </h4>
<img src="../../../Content/images/profile-3.jpg" alt="" width="40" height="40" />
<label class="text-wet-ashpalt" style="font-weight: 200; font-size: 12px;">{{s.User.FullName}} </label>
<label class="text-wet-ashpalt" style="font-weight: 200; font-size: 12px;">({{s.ProblemId}}) </label>
<label class="text-wet-ashpalt" style="font-weight: 200; font-size: 12px;">{{s.CreatedOn}} </label>
<i class="fa fa-thumbs-o-up text-belize-hole fa margin-left"></i>{{s.Vote}}
<div>
<span class="top margin-top">
{{s.Description}}
</span>
</div>
</div>
<div class="margin-top">
<a data-toggle="collapse" data-parent="#accordion" title="{{ '#collapse-' + p.ProblemId }}" class="">
<button class="float-right" ng-click="GetCommentsForProblemId(p.Id,$event)">View History</button>
</a>
<!-- Comment Accordion control -->
<div class="panel-collapse " style="height: auto;">
<i class="fa fa-check-circle text-info fa-2x" style="height: 40px; margin-left: -25px; position: absolute"></i>
<h4 class=" margin-top padding-left " style="padding-top: 5px;">Comment(s) </h4>
<div id="{{ 'collapse1-' + c.ProblemId }}" ng-repeat="c in Comments" style="height: auto;">
<div class="panel-body">
<div>
<img src="../../../Content/images/profile-2.jpg" alt="" width="40" height="40" />
<label class="text-wet-ashpalt" style="font-weight: 200; font-size: 12px;">{{c.User.FullName}} </label>
<!--<label class="text-wet-ashpalt" style="font-weight: 200; font-size: 12px;">{{c.Id}} </label>-->
<label class="text-wet-ashpalt" style="font-weight: 200; font-size: 12px;">{{c.CreatedOn}} </label>
<div>
<span class="top margin-top">
{{c.Comment}}
</span>
</div>
</div>
<div class="margin-top">
<!--Paging -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
but when ng click fired on each problem, the latest clicked solution renders in all the panel
need sample for this