How do I pre-select the selected item in a dropdown list? [Angular]

Question

I currently have a service in angular returning me a list of states. The array looks like this:

model.Address.StateList = [
     { Disabled: false,
       Group: null,
       Selected: false,
       Text: "CA",
       Value: "1"
      },
 { Disabled: false,
       Group: null,
       Selected: false,
       Text: "IL",
       Value: "2"
      },
      { Disabled: false,
       Group: null,
       Selected: false,
       Text: "NJ",
       Value: "3"
      }
]

I am also returning from the service the state they actually choose which looks like this:

 model.Address.State = "CA"

I have scoured stackoverflow trying to find a way to make this work but I can't figure out how to pre-select the value in the list.

I have tried this:

<select id="State" ng-model="model.Address.State" ng-change="changeState(model.Address.State)" ng-options="option as option.Text for option in model.Address.StateList track by option.Value"></select>

But that does not pre-select the first item.

The one way I have got it to work is changing ng-model to "selectedItem" and in the controller I wrote:

   $scope.selectedItem = responseModel.Address.StateList[0];

But that only picks the first item.

It seems that the problem is that I have a collection of States but the model I want is just the singular text. And ideally I'd like to set the selected to be added to the model object so when I save I can just pass "model" to my api with all the values I need.

Answer 1

See this JSFiddle for a possible solution.

I am using a scope variable selectedState there and use it in the ng-model attribute, but you can replace that with model.Address.State if you prefer.

---

Since you bind model.Address.State with the ngModel directive and use track by option.Value , you can set the value of model.Address.State to the value of the option that you want to set active:

model.Address.State = "1";

If you want to use "CA" instead, you can change your ng-model to a property of the current scope:

<select ng-model="model.Address.State" ng-options="option.Text as option.Text for ... track by Text" ...>

$scope.selectedState = "CA";

Answer 2

The value that you want to use for ng-model should match the value that you use in ng-options . For example:

model.Address.State = "CA"; // matches the Text property
<select id="State" ng-model="model.Address.State" ng-options="option.Text for option in model.Address.StateList"></select>

If instead you want to use Value , you need to match them up:

model.Address.State = "1"; // matches the Value property
<select id="State" ng-model="model.Address.State" ng-options="option.Text as option.Value for option in model.Address.StateList"></select>

Hope that helps.

Answer 3

I figured it out!

Thanks to the insightful guide written HERE I was able to understand a little more about ng-options and Select in angular.

What ended up being the problem is that I need to specify that the text shown in the dropdown list matches the text in the model. The final code that made it work was:

 <select id="State" ng-model="model.Address.State" ng-options="option.Text as option.Text for option in model.Address.StateList"></select>