AngularJS select value from options and add to array - angularjs

Question

I am new with AngularJS. 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:
clusterController.js
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]);
}
}
};
});
cluster.html
<div class="maincontent">
<div class="article">
<form>
<section>
<!-- Environment -->
<div class="col-md-6">
<label>Environment:</label>
<select ng-model="selectedEnvi" class="form-control" ng-options="clust.environment for clust in clusters">
<option value='' disabled selected style='display:none;'>
Select Environment
</option>
</select>
</div>
<!-- cluster Name -->
<div class="col-md-6">
<label>Cluster Name:</label>
<input type="text" class="form-control" name="clusterName" placeholder="Cluster" ng-model="clust.cluster" required>
<br/>
<input type="hidden" ng-model="clust.id" />
</div>
</section>
<!-- submit button -->
<section class="col-md-12">
<button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">Save Cluster</button>
</section>
</form>
</div>
<!-- table -->
<div class="article">
<table class="table table-bordered table-striped">
<tr>
<th colspan="3">
<div class="pull-left">Cluster Info</div>
</th>
</tr>
<tr>
<th>#</th>
<th>Environment</th>
<th>Cluster</th>
</tr>
<tr ng-repeat="clust in clusters">
<td>{{}}</td>
<td>{{clust.environment}}</td>
<td>{{clust.cluster}}</td>
</tr>
</table>
</div>
</div>

Answer 1

First of all, make an own array for the possible selections of the environment selections. Right now you get the possible values from an existing list of clusters (you can leave it like this of course, but I find it confusing!). Let's just go with the following:
$scope.environments = [
{name: 'DEV',},
{name: 'PROD',},
{name: 'QA',},
{name: 'Linux_Dev'}
];
Furthermore, you need to preselect an environment in ngModel for the select values. We need to do this, because after the page is loaded, the select box maybe shows "DEV", but it doesn't set the ngModel to "DEV". It only updates the ngModel after manually selecting a value.
Set it like this:
$scope.selectedEnvironment = $scope.environments[0];
This sets the model "selectedEnvironment" to {name: "Dev"}.
The selection box:
<select ng-model="selectedEnvironment" class="form-control" ng-options="environment.name for environment in environments">
<option disabled value="">-- choose environment --</option>
</select>
I set the model to "selectedEnvironment", so the preselection from the controller will work. I also changed hg-options to use the JSON which contains the environment names.
The last thing to do is a minor change on the "saveNewClust" function:
if ($scope.clust.id == null) {
//if this is new contact, add it in contacts array
$scope.clust.id = uid++;
$scope.clust.environment = $scope.selectedEnvironment.name;
$scope.clusters.push($scope.clust);
}
What happens: We just give the name of the environment to $scope.clust.environment.
I made a fiddle containing the working demo:
http://jsfiddle.net/hs6Rz/9/