javascript - Ajax request for a specific item in a list -

i'm new angularjs , don't know how accomplish task. in system have database 2 tables: "customers" , "offices". 1:n relation. in html page have list (actually table) contains info customers (info extracted "customers" table). each row of table, can find button. if click on button infos offices of customer loaded database.

the first part quite simple. angular service loads customers info:

angular.module("app").factory("customer", ["$resource",      function($resource){         return $resource("/customers/list",                              {format:'json'},                             {                                 find: {                                        method:'get'                                 }                             }); }]); 

this angular controller exposes array of customers:

angular.module("app").controller("customerscontroller", ["customer", "$scope",     function (customer, $scope){         var customers = new array();         var metacustomers = customer.find(function(){             for(var i=0; i<metacustomers.results.length; i++){                 customers[i] = new object();                 customers[i].customername = metacustomers.results[i].customer_name;                 customers[i].customerid = metacustomers.results[i].customer_id;             }             $scope.customers = customers;         }); }]); 

and part of view shows info:

<table>                     <thead>                             <th></th>                             <th></th>                             <th></th>                     </thead>                     <tr data-ng-repeat="customer in customers | filter:query">                             <td>                                     <a href="#expan-offices">+</a>                             </td>                             <td>                                 <strong>{{customer.customername}}</strong>                             </td>                             <td>                                 <div>                                                <a title="modify customer" href="/customers/post/{{customer.customerid}}">                                     </a>                                     <a title="delete customer" href="/customers/delete/{{customer.customerid}}">                                     </a>                                 </div>                             </td>                         </tr>                 </table> 

all of looks like:

the problem arrives second task. when click on "+" button must load offices infos customer (the customer on same row of button). need customerid retrieve these infos , have it. but, how can angular load info belongs right customer? don't know how model situation. need help. thank in advance.

you can pass customer ng-click directive so:

 <a href="#expand-offices" ng-click="expand(customer)">+</a> 

and create expand function in controller takes customer input. this:

$scope.expand = function(customer){     //fetch customer };