title: nested ng-repeat with open particular index with respect to repeated data
body: <p>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</p>
  
  <blockquote>
    <p>here is my html</p>
  </blockquote>
  
  <pre><code>            &lt;tbody data-ng-repeat="invoice in relatedInvoices&gt;
                  &lt;tr&gt;
                      &lt;td class="td-bottom-border"&gt;
                              {{invoice.PayableCurrencyCode}} {{invoice.PayablePaidAmount | number: 2}}&lt;br /&gt;
                              &lt;small&gt;
                                  &lt;a data-ng-click="isOpenPayablePayments[$index] = !isOpenPayablePayments[$index]; togglePayablePayments(invoice.PayableInvoiceId)"&gt;Paid&lt;/a&gt;
                              &lt;/small&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr data-ng-show="isOpenPayablePayments[$index]"&gt;
                      &lt;td&gt;
                          &lt;table&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Transaction Id&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  &lt;tr data-ng-repeat="payment in payablePayments"&gt;
                                      &lt;td&gt;{{payment.TransactionId}}&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
  </code></pre>
  
  <blockquote>
    <p>Here is my javascript</p>
  </blockquote>
  
  <pre><code>    var getPayments = function (invoiceId) {
          paymentService.getPayments(invoiceId).then(function (paymentsResponse) {
              return paymentsResponse.data;
          });
      };
  
      $scope.togglePayablePayments = function(invoiceId) {
          $scope.payablePayments = getPayments(invoiceId);
      };
  </code></pre>