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:

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

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

Answer 1

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"
    }];
}