title: Angular JS : updating object values in scope after the backend call
body: <p>I have an angular js html page having a HTML table. This has some 100 rows. The user selects 10 or 15 rows and makes a backend call. The backend call is made using $.ajax({...}) to do the processing and update the database. After processing, the backend returns 2 or 3 records back to the screen. These returned objects will have new statuses and some new values. So I need to sync these statuses back to the same object in my scope so they get reflected on the screen. </p>
  
  <p>I know we can loop through each object and update the status. But as the size of the data is too high (sometimes even 1000 rows), I want to know if there is any readily available feature in angular to do this job. If no such feature is available in Angular, please suggest any other free open source tools that can come to help for me.</p>
  
  <p>I am attaching the code snippet here. Just because of confidentiality reasons, I converted my problem into customer account scenario</p>
  
  <pre><code>&lt;table &gt;
       &lt;thead &gt;
         &lt;tr&gt;  
       &lt;th &gt;Customer Name&lt;/th&gt;
       &lt;th &gt;Account Number&lt;/th&gt;
       &lt;th &gt;Status &lt;/th&gt;
       &lt;th &gt;Date&lt;/th&gt;                 
         &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody  ng-repeat="customer in customerList"&gt;
         &lt;tr  ng-repeat="account in customer.accounts"  &gt;
      &lt;td&gt;{{customer.name}}&lt;/td&gt;
      &lt;td&gt;{{account.acctNum}}&lt;/td&gt;
      &lt;td&gt;
           &lt;input type="checkbox"  ng-model="account.acctId"  ng-change="selectThisAccount(account)" /&gt; {{account.status}}
      &lt;/td&gt;
      &lt;td&gt;{{account.activationTimestamp}}&lt;/td&gt;
         &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;input  type="button" value="Activate Accounts"   ng-click="activateAccounts()"  /&gt;
  
  Controller
  ===========
  
  $scope.customerList = ....
  // I have my customer list retrieved by way of another call and the data is assigned to the scope.customerList variable
  
  $scope.selectedAccounts = [];
  $scope.selectThisAccount = function(account) {
        $scope.selectedAccounts.push(account);
  };
  
  
  $scope.activateAccounts = function() {
      $scope.successfullyActivatedAccounts = [];
      $scope.successfullyActivatedAccounts = AccountService.activateAccounts($scope.selectedAccounts);
  }
  
  AccountService.js
  ======================
      this.activateAccounts = function(accounts)
      {
  
      var accountRequest ={};
      accountRequest.accountList = accounts;
  
       return $.ajax({
            type : 'POST',
            url: 'activateAccounts',
            data:JSON.stringify(accountRequest),
            dataType: "json",
            contentType: "application/json",
            success: function(accountresponse){
           return accountresponse.accountList;    
            },   
            error : function(xhr, ajaxOptions, thrownError) {
               hideReportMessage();
               alert( "Error: " + xhr.responseText + "\n" + thrownError );
            }
        });  
      },
  </code></pre>
  
  <p>To explain this, a customer can have multiple accounts and each account can be in different states. The end user will see a list of customer accounts, selects a list of them and tries to activate accounts. Only those account objects that are activated will be returned by the server. I need to update the value of account.status identifying the right object without looping through the entire list.</p>
  
  <p>Please help.</p>