how to open row at the same index in ng-repeat , nested ng-repeat

Question

I am new to angularjs and facing an issue with ng-repeat. A list of invoices repeated with ng-repeat, each invoice has List of Payments. I'm trying to get the payments on click of one of the repeated row and then another and so on.

when I open the first one it opens with exact data, when we open other row payments it opens with new payments by replacing the old one. Both payments of the First row payments and second row payments are same.

List of payments has to open with ng-repeat of that particular index. it has to happen for every invoice which is not happening with following

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);
    };

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

Answer 1

Working Demo

<tbody>
      <tr data-ng-repeat="city in name.cities">
             <td>{{city.city}}</td>
      </tr>
</tbody>

Actually you have to specifies main object name with the cities. name.cities

That's all !!!

Hope this will help you.

Feel free to ask any doubt on this.