angular drop down selected ng-model not binding

Question

I'm currently having a problem with selecting drop downs which are not working correctly with angularjs . Couldn't find anything that relates to my problem. It seems odd.

I am a newbie to angularjs so please forgive my ignorance

I am currently trying to retrofit angularjs onto my MVC5 application.

Here are the issues;

1. When $scope.selected = $scope.options[0] is declared it is assigned, but as if the select list does not recognize the model's object and creates a new option

2. Once you change the selected option on the drop-down, selected the object in scope is now empty?

Here is the code

Answer 1

The comprehension expression is incorrect. It looks like you want the whole option as the selected value so use this:

ng-options="o.text for o in options"

Answer 2

You should change your

<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>

to

<select ng-model="selected" ng-options="o as o.text for o in options"></select>

to make it work as you expected.

because the documentation says select as label for (key , value) in object but in your case select is equal to code property of the object, not the object itself.

Answer 3

<div>
  <select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
  <br />Code: {{ selected.code }}
  <br />Text: {{ selected.text }}
</div>

Your ng-model will contain the value of the select (in this case the index [0,1,2,etc]). So you are attempting something like this "1.code" or "2.text".