title: AngularJS select value from options and add to array
body: <p>I am new with <code>AngularJS</code>. I want to add values into array and display those in table after clicking on Save button.
  One is select Menu and other is TextBox. Presently, I am able to add text value but not able to get selected value.
  Here is what I have:</p>
  
  <p><strong>clusterController.js</strong></p>
  
  <pre><code>apsApp.controller('clusterController', function ($scope) {
  
  var uid = 4;
  $scope.clusters=[
                 {id:0, 'environment':'DEV', 'cluster':'cluster1'},
                 {id:1, 'environment':'PROD', 'cluster':'cluster2'},
                 {id:2, 'environment':'QA', 'cluster':'cluster3'},
                 {id:3, 'environment':'Linux_Dev', 'cluster':'cluster4'}
              ];
  
  //add new cluster
   $scope.saveNewClust = function() {
  
          if($scope.clust.id == null) {
          //if this is new contact, add it in contacts array
  
          $scope.clust.id = uid++;
          $scope.clusters.push($scope.clust);
          } 
          else {
          //for existing contact, find this contact 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 contact form
          $scope.clust = {};
      };
  
      //delete cluster
      $scope.remove = function(id) {
          //search contact 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 contact 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><strong>cluster.html</strong></p>
  
  <pre><code>&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="selectedEnvi" class="form-control" ng-options="clust.environment for clust in clusters"&gt;
                                      &lt;option value='' disabled selected 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="3"&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;/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;/tr&gt;
                          &lt;/table&gt;                                                        
                      &lt;/div&gt;                      
                  &lt;/div&gt;
  </code></pre>