Adding ng-model to predefined Select element adds undefined option

[OuchMyHead]

Adding ng-model:"foo" to a prepopulated select element results in an additional "undefined" option being added and removes the effect of select:"select".

The HTML:

<select ng-model="foo" ng-app >
    <option value="1">1</option>
    <option selected="selected" value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

Becomes:

<select ng-model="foo" ng-app >
    <option value="? undefined:undefined ?"></option>
    <option value="1">1</option>
    <option selected="selected" value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

In the example above the first option value="? undefined:undefined ?" is selected instead of the expected option value="2".

Reproduced at http://jsfiddle.net/K8rSu/

[lauterry]

Hello

I have encountered the same issue.

I cannot set a default selected item when using ng-model directive with select element.

A workaround could be to set the value of the foo object in the controller side.

$scope.foo = '2';

[Urigo]

Had the same issue.
The work around doesn't work for me.

Hi Folks,

I am using v1.0.1 and I still encounter the same problem, is there any update about this issue ?

[appetito]

it's a feature, not a bug

[MathRobin]

Anyone as a solution ? I have the same bug...

[appetito]

Guys, this is not a bug. The select element is bind to model field, which data is undefined. What value select should display? Yes, undefined. You try to pass data via markup, it is not an Angular way.
Just keep your data in JS model, not in HTML markup.

[pkozlowski-opensource]

Agree with @appetito, this is not a bug as far as I can tell. There is a similar question with an answer on SO:
http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select

[brainsqueezer]

As commented by other people this happens when a value is asigned in the model that isn't an option in the select. So it's developers fault. But I also think current behaviour is not good. Data inconsistency happens, regardsless we like it or not, so we have to find ut the best way to deal with it.

Currently if a nonexistant value is assigned Angular adds more inconsistency, it adds a nonexistant option to the select (usually "? string:undefined ?", "? undefined:undefined ?" or "?") so now we have two values that doesn't exist, instead of one. A good behaviour would be adding the nonexistant option to the select or not adding anything. That would be much better than the current behaviour, because of it would keep or mitigate data inconsistency instead of increasing it.

[manlito]

In my case, I solved it by putting the select element inside the ng-controller related to it.

[pkozlowski-opensource]

As already commented by many people this works as intended. Closing for now, please reopen if need.

[gsklee]

@pkozlowski-opensource I think there is room for improvement, especially when using together with ngSelected:

<select ng-model="foo" ng-app >
    <option value="1">1</option>
    <option ng-selected="true" value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

In this case I believe it is very explicit that the developer is expecting $scope.foo === 2 after the initial page loading is completed.

[trisweb]

If you really really want to do this, just ng-init your model. You're already doing one thing in a non-Angular way, so you might as well do two.

<select ng-model="foo" ng-app ng-init="foo='2'">

[electrize]

I tried everything and only this is working.

 <select ng-init="person='1'" ng-model="person">