update ng-repeat item's data inside ng-repeat at click - angularjs

Question

I’m having my first steps with angularjs framework, and I’m not understanding how I can update my second ng-repeat data inside each of the first’s item ng-repeat only when a user click on it (lazy loading).
<table class="table table-striped table-hover">
<tbody ng-repeat="customer in customers">
<tr>
<td>
<button ng-click="loadInvoices(customer); showDetails = !showDetails;" type="button" class="btn btn-default btn-xs">
</td>
<td>{{customer.ClientId}}</td>
</tr>
<tr ng-show="showDetails">
<td>
<table class="table table-striped table-hover">
<tbody ng-repeat="invoice in invoices">
<tr>
<td>{{invoice.Id}}</td>
</tr>
</tbody>
</table>
</td>
</tr><!--showDetails-->
</tbody><!--.customer-->
</table>
How can I achieve it? Thanks for your help! :)

Answer 1

You can do something like this:
<button ng-click="loadInvoices(customer);" type="button" class="btn btn-default btn- xs">Invoces</button>
and in controller:
$scope.loadInvoices = function(customer) {
if (this.showDetails = !this.showDetails) {
if (!this.invoices) {
// Load invoices for current customer (probably using service)
Customer.loadInvoices(customer.ClientId).then(function(invoices) {
customer.invoices = invoices;
});
}
}
}
By checking if (!this.invoices) {...} (this points to the current customer scope) you make sure that current customer doesn't have loaded invoices yet and you need to load them. On subsequent button clicks customer.invoices is going to be already available and you will not load data again.
I also added an example how using Customer service would fit into this workflow.
View demo: http://plnkr.co/edit/LerBd9ZTPLwhp8JZ6xwU?p=preview

Answer 2

With the ng-controller directive
Simply use the ng-controller directive to tell that a customer scope will be managed by an instance of the controller you pass in.
With a custom directive
Typical design for this: a customer directive with a customer controller which manages the scope of one customer.
The keys are:
ng-repeat creates child scopes
add a directive to attach a controller to each of those scopes
you can now manage each customer scope independently.
The controller, in both cases
This controller will hold loadInvoices which will attach the invoices array to the customer scope.
Why a custom directive ? You will also be able to have a separate template for a customer, specific pre link and post link functions, etc.
Why a customer specific controller since scope inheritance will enable the loadInvoices context to be the customer specific scope ? Extensibility, testability, decoupling.