AngularJs and <select>: Default selected options are removed

angularjs, html-select

Solution

The easiest way to fix your implementation is to use `ng-init`.

<div>
    <select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
    <div>Selected Colors: {{selectedColors }}</div>
</div>

Try it on FIDDLE.

Problem

I expect the following code to render a drop down list with the third option selected by default. However, when I bind the select with angularjs, the default selection disappears. Any thought? ``` var myApp = angular.module('myApp', []); ... <div> <select id="myselection" ng-model="selectedColors"> <option value="1" >Red</option> <option value="2">Blue</option> <option value="3" selected="selected">Green</option> </select> <div> Selected Colors: {{selectedColors }} </div> </div> ``` Here's a working example: http://jsfiddle.net/TXPJZ/134/ Thanks!

Original source