How to set initial value for select element in AngularJS? - angularjs

Question

I write dependent comboboxes and faced such problem - how to set initial value? For example, I have a form for adding new records:
Controller.js:
...
$http({
url: '/api/address/fill',
method: 'POST'
}).success(function (data) {
$scope.itemsForLevelOne = data
}).error(function(errorData) {
...
});
$scope.updateOne = function() {
$http({
url: '/api/address/change',
method: "POST",
data: {'tobId' : $scope.itemOne.id}
}).success(function (data) {
$scope.itemsForLevelTwo = data;
}).error(function(errorData) {
...
});
};
...
View.html:
...
<label>Level One</label>
<select class="form-control m-b"
data-role="listview"
data-inset="true"
ng-options="someValue as someValue.tobName for someValue in itemsForLevelOne"
ng-model="itemOne"
x-ng-change="updateOne(itemOne)">
</select>
<label>Level Two</label>
<select class="form-control m-b"
data-role="listview"
data-inset="true"
ng-options="someValue as someValue.tobName for someValue in itemsForLevelTwo"
ng-model="itemTwo"
x-ng-change="updateTwo(itemTwo)">
</select>
...
From the controller I can make call to the server- side (Play Framework in my case) and then extract data from the database and save them.
In the forms of editing and deleting records I should to set the initial values for all select elements.
How can I do it?

Answer 1

AngularJS uses bidirectional binding. The selected option is stored in the ng-model attribute when a selection is made, and it's also read from the ng-model attribute on order to display the correct selection.
So you pick the element to select from the array of options, and initialize the variable corresponding to the ng-model of the select. For example, to have the first element selected, you do
$scope.itemOne = $scope.itemsForLevelOne[0];

Answer 2

You should use ng-repeat instead of ng-options
<select>
<option ng-repeat="someValue as someValue.tobName for someValue in itemsForLevelTwo" ng-selected="expression_to_be_evaluated"
</select>
ng-repeat with the option tag, gives you more control than ng-options.

Answer 3

What JB said, but remember it is IMPERATIVE that the values match between the object that you pass to the ng-model and the list values themselves; In your case:
$scope.itemOne = someValue;
$scope.itemTwo = someValue2;
someValue and someValue2 NEED to match up with a corresponding option value, or else you will end up with the dreaded empty first box.
Another solution would to add a default chooser option which instructs the user to choose an option:
...
<label>Level One</label>
<select class="form-control m-b"
data-role="listview"
data-inset="true"
ng-options="someValue as someValue.tobName for someValue in itemsForLevelOne"
ng-model="itemOne"
x-ng-change="updateOne(itemOne)">
<option>Please Select An Item</option>
</select>
...
This way, the person filling out the form will never select an option involuntarily. This default option, because it has no value, will disappear when a selection is made.