title: AngularJS update table data
body: <p>I have to create a simple CRUD page with AngularJS.
  I am able to add data with save button. Now when clicked on edit link form should get filled with the values with the row value. I am using angular's '.copy' object to get data into form.</p>
  
  <p>For now text box getting valuse successfully but the select box not updating. And also want to make the select menu disable once clicked on edit link. </p>
  
  <p>Below is the code:</p>
  
  <pre><code>apsApp.controller('clusterController', function ($scope ) {
  
  var uid = 1;
  $scope.clusters=[
                 {id:0, 'cluster':''},
  
              ];
  $scope.environments = [
                         {name: 'DEV'},
                         {name: 'PROD'},
                         {name: 'QA'},
                         {name: 'Linux_Dev'}
                     ];
  
  $scope.selectedEnvironment = $scope.environments[0];
  
  //add new cluster
   $scope.saveNewClust = function() {
  
          if($scope.clust.id == null) {
          //if this is new cluster, add it in clusters array
          $scope.clust.id = uid++;
          $scope.clust.environment = $scope.selectedEnvironment.name;
          console.log($scope.clust);
          $scope.clusters.push($scope.clust);
          } 
          else {
          //for existing cluster, find this cluster using id and update it.
              for(i in $scope.clusters) { 
                  if($scope.clusters[i].id == $scope.clust.id) {
                  $scope.clusters[i] = $scope.clust;              
                      }
              }  
          };
  
          //clear the add clusters form
          $scope.clust = {};
      };
  
      //delete cluster
      $scope.remove = function(id) {
          //search cluster with given id and delete it
          for(i in $scope.clusters) {
              if($scope.clusters[i].id == id) {
                  confirm("This Cluster will get deleted permanently");
                  $scope.clusters.splice(i,1);
                  $scope.clust = {};
              }
          }     
      };
  
      $scope.edit = function(id) {
          //search cluster with given id and update it
              for(i in $scope.clusters) {
                  if($scope.clusters[i].id == id) {
                      //we use angular.copy() method to create copy of original object
                      $scope.clust = angular.copy($scope.clusters[i]);  
                  }
              }
          };
  });
  </code></pre>
  
  <p>HTML Template is:</p>
  
  <pre><code>&lt;div class="menuContent"&gt;   
      &lt;div class="maincontent"&gt;
          &lt;div class="article"&gt;
          &lt;form&gt;
              &lt;section&gt;
                  &lt;!--  Environment --&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;label&gt;Environment:&lt;/label&gt;
                       &lt;select ng-model="selectedEnvironment" class="form-control" ng-options="environment.name for environment in environments"&gt;
                          &lt;option value='' disabled style='display:none;'&gt;
                              Select Environment
                          &lt;/option&gt;
                       &lt;/select&gt;   
                  &lt;/div&gt;
  
                  &lt;!--  cluster Name --&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;label&gt;Cluster Name:&lt;/label&gt;
                      &lt;input type="text" class="form-control" name="clusterName" placeholder="Cluster" ng-model="clust.cluster" required&gt;
                      &lt;br/&gt;
                      &lt;input type="hidden" ng-model="clust.id" /&gt;
  
                  &lt;/div&gt;
              &lt;/section&gt;
                  &lt;!-- submit button --&gt;  
              &lt;section class="col-md-12"&gt;
                  &lt;button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()"&gt;Save Cluster&lt;/button&gt;
              &lt;/section&gt;
          &lt;/form&gt; 
          &lt;/div&gt;                      
          &lt;!--  table --&gt;
          &lt;div class="article"&gt;
               &lt;table class="table table-bordered table-striped"&gt;
                  &lt;tr&gt;
                      &lt;th colspan="4"&gt;
                          &lt;div class="pull-left"&gt;Cluster Info&lt;/div&gt;
                      &lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;#&lt;/th&gt;
                      &lt;th&gt;Environment&lt;/th&gt;
                      &lt;th&gt;Cluster&lt;/th&gt;
                      &lt;th&gt;Edit&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr ng-repeat="clust in clusters"&gt;
                      &lt;td&gt;{{}}&lt;/td&gt;
                      &lt;td&gt;{{clust.environment}}&lt;/td&gt;
                      &lt;td&gt;{{clust.cluster}}&lt;/td&gt;
                       &lt;td&gt;
                       &lt;a href="" ng-click="edit(clust.id)" title="Edit"&gt;&lt;span class="glyphicon glyphicon-edit" &gt;&lt;/span&gt;&lt;/a&gt; | 
                      &lt;a href="" ng-click="remove(clust.id)" title="Delete"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;/td&gt;       
                  &lt;/tr&gt;
              &lt;/table&gt;                                                        
          &lt;/div&gt;                      
      &lt;/div&gt;              
  &lt;/div&gt;
  </code></pre>