angular js : issue with html5 select

Question

I came across this strange behavior today.. The same I found with one fiddle..(saved some time to explain the issue..)

I have a fiddle here: http://jsfiddle.net/w9mQ8/2/

It demonstrates how to set a selected value in html select.

Now, the strange thing in it.. The fiddle the result pane shows the output which has a select, with the selected value. Thats good..

But, from where, I dont know, the blank value prepended the options in that select:

enter image description here

When I did inspect element, on this I found some unknown value, prepending the options:

enter image description here

Please help me to remove this issue. Thanks. :)

possible duplicate of [Remove empty select option in angular ng-repeat](http://stackoverflow.com/questions/21361214/remove-empty-select-option-in-angular-ng-repeat) — Fissio, Jun 09 '15 at 10:25
It's because you use an object to bind to the select. Please use the `ng-options` directive for this — devqon, Jun 09 '15 at 10:26
http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select Check This out — Chamath Nimantha, Jun 09 '15 at 10:31

score 0 · Accepted Answer · answered Jun 09 '15 at 11:13

Ok. I understood the situation and updated the fiddle. Check the new fiddle: http://jsfiddle.net/w9mQ8/9/

As per the suggestions, in the comments, following changes helped me to achieve what I want:

html:

<div ng-controller="MyCtrl">
    <select ng-model="selectedValue" required="required" ng-options="option.id as option.value for option in defaults"></select>
</div>

js:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.selectedValue = 22;
    $scope.defaults = [{
        id: 10,
        value: "string 1"
    }, {
        id: 22,
        value: "string 2"
    }];
}

angular js : issue with html5 select

1 Answers1