AngularJS binding issue in ngRepeat (Collapse and Expand Caret)

Question

I am trying to implement collapse and expand panels in a ngRepeat. I have tried this:

<tbody ng-repeat="item in Items">
    <tr data-toggle="collapse" class="accordion-toggle">
        <td>{{item.name}}</td>
        <td>
        <a class="dropdown-toggle" ng-click="isCollapsed = !isCollapsed;getDetails(item.id);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
        </td></tr>
    <tr>
        <td class="hiddenRow">
            <div class="accordian-body collapse" collapse="isCollapsed">
            <table class="table display" style="border-collapse:collapse;">
                <thead><tr>
                <th>Student Name</th><th>Roll Number</th></tr></thead>
                <tbody>
                <tr>
                    <td>{{studentRecord.patientName}}</td><td>{{studentRecord.rollNumber}}</td>
                </tr></tbody></table>
            </div>
        </td>
    </tr>  
</tbody>

Script :

$scope.getDetails = function (sId)
    {

    var studentDetails = DetailService.getDetail("studentsDetails", sId);
    studentDetails.then(function(data) {
                $scope.studentRecord = data;
         });    
    }

When I click on single caret button in ngRepeat it is working fine. But, when I click multiple items, repeater creates a scope for every item. So, all records in ngRepeat gets same scope values. How to resolve it.

Answer 1

U should make property in item like

item.studentRecord 

then use

getDetails(item)

$scope.getDetails = function (item)
    {

    var studentDetails = DetailService.getDetail("studentsDetails", item.id);
    studentDetails.then(function(data) {
                item.studentRecord = data;
         });    
    }

<td>{{item.studentRecord.patientName}}</td>
<td>{{item.studentRecord.rollNumber}}</td>