bootstrap accordion inside angularjs ng repeater sample

Question

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