Angular Select Adding undefined option

Question

I have this tempScale object defined in my controller:

$scope.tempScale = {
    scaleType : [],
    deviations : [],
    intervals : 0
};

Which connects to my html:

<select id="scales" ng-model="tempScale.scaleType" class="form-control">
    <option value="Manually Calculated" ng-selected="true">Manually Calculated</option>
    <option value="Automatically Calculated">Automatically Calculated</option>
</select>

I added in the ng-selected=true so that manually calculated would be the first and selected option (basically a default option 1), however, when I run the page, my HTML looks like:

<select id="scales" ng-model="tempScale.scaleType" class="form-control ng-valid ng-dirty ng-touched">
    <option value="? undefined:undefined ?"></option>
    <option value="Manually Calculated" ng-selected="true" selected="selected">Manually Calculated</option>
    <option value="Automatically Calculated">Automatically Calculated</option>
</select>

Why are those ng classes appearing on load, and where is this undefined option value coming from? It's not a loop, so I'm baffled.

Rayon · Accepted Answer · 2016-01-11 19:53:53Z

3

You do not need ng-selected. Set the model from the controller as $scope.tempScale.scaleType='Manually Calculated';.

One cannot set a default selected item when using ng-model directive with select element. 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.[Ref]

Plunker demo

edited Jan 11, 2016 at 19:53

answered Jan 11, 2016 at 19:51

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sterling Archer Over a year ago

Ah, I didn't know ng-model more or less canceled out the default selected item. Thank you.

Collectives™ on Stack Overflow

Angular Select Adding undefined option

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related