Pass a unique identifier into AngularJS collapse?

Question

I have a table, within which I have a span element which I want to collapse expand when I click on the top row of the table. I am using the anuglar function collapse

So far this is working fine but if I have three identical tables, clicking one top row collapses all three of them.

Can I pass some unique identifier into the collpase function somehow?

HTML

<div ng-repeat="detail in details.detail">
    <div class="my_table">
        <table>
            <tbody>
                <tr class="top_row" ng-click="isCollapsed = !isCollapsed">
                    <td colspan="2">                            
                        <span class="f_name">
                            {{ details.f_name }}
                        </span>
                        <span class="l_name" >
                            {{ details.l_name }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="detail">
                        <span class="_address" collapse="isCollapsed">
                            {{ details.address }}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

JS

function CollapseCtrl($scope) {
    $scope.isCollapsed = false;
}

Answer 1

You can use special variable $index in ng-repeat and also use array for model

<div ng-repeat="detail in details.detail">
    <div class="my_table">
        <table>
            <tbody>
                <tr class="top_row" ng-click="isCollapsed[$index] = !isCollapsed[$index]">
                    <td colspan="2">                            
                        <span class="f_name">
                            {{ details.f_name }}
                        </span>
                        <span class="l_name" >
                            {{ details.l_name }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="detail">
                        <span class="_address" collapse="isCollapsed[$index]">
                            {{ details.address }}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>


function CollapseCtrl($scope) {
    $scope.isCollapsed = [];
}