bootstrap accordion inside angularjs ng repeater sample

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 Historybutton>

a>

<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.CreatedOn}} label>

<div>

<span class="top margin-top">

{{c.Comment}}

span>

div>

div>

<div class="margin-top">

div>

div>

div>

div>

div>

div>

div>

div>

div>

div>

div>