nested ng-repeat with open particular index with respect to repeated data

Question

Every time the toggle is clicked, all payments are getting replaced with new payments. My problem is how to maintain the payments of a particular index of every click and show at respective index. please help me out

here is my html

            <tbody data-ng-repeat="invoice in relatedInvoices>
                <tr>
                    <td class="td-bottom-border">
                            {{invoice.PayableCurrencyCode}} {{invoice.PayablePaidAmount | number: 2}}<br />
                            <small>
                                <a data-ng-click="isOpenPayablePayments[$index] = !isOpenPayablePayments[$index]; togglePayablePayments(invoice.PayableInvoiceId)">Paid</a>
                            </small>
                    </td>
                </tr>
                <tr data-ng-show="isOpenPayablePayments[$index]">
                    <td>
                        <table>
                            <thead>
                                <tr>
                                    <th>Transaction Id</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-ng-repeat="payment in payablePayments">
                                    <td>{{payment.TransactionId}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>

Here is my javascript

    var getPayments = function (invoiceId) {
        paymentService.getPayments(invoiceId).then(function (paymentsResponse) {
            return paymentsResponse.data;
        });
    };

    $scope.togglePayablePayments = function(invoiceId) {
        $scope.payablePayments = getPayments(invoiceId);
    };

Answer 1

If I understood correctly, you want to have "payablePayments" for every invoice.

This is working: http://plnkr.co/edit/cj3jxZ?p=info

Try something like

// init at beginning
$scope.payablePayments = [];

$scope.togglePayablePayments = function(invoiceId) {
    $scope.payablePayments[invoiceId] = getPayments(invoiceId);
}; 

and then

<tr data-ng-repeat="payment in payablePayments[invoice.PayableInvoiceId]">

Otherwise you overwrite the object for the preceding invoice.