AngularJs and <select>: Default selected options are removed - angularjs

Question

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!

Answer 1

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.

Answer 2

Angular overrides the "selected" property when you bind the select to a model. If you inspect the rendered DOM you will find that a new item has been added:
<option value="? undefined:undefined ?"></option>
In order to automatically select the third option you need to pre-populate the model in scope. There are a few ways to do this, including wrapping the select in a controller:
<div ng-controller="MyCtrl">
<select id="myselection" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
And then defining that model in the controller.
var myApp = angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.selectedColors = 2;
}]);
Here's a running example.
http://jsfiddle.net/93926/
Alternatively, you could just initialize it using ng-init such as in this example:
<div ng-init="selectedColors=3">
http://jsfiddle.net/9JxqA/1/
EDIT: Removed the selected property in the first example, it's no longer needed.

Answer 3

By adding option with empty value to select and initializing selectedColors to empty string(ng-init="selectedColors=''"), we can see 'select Color' option on top instead of having first color to be selected defaultly:
<div>
<select id="myselection" ng-init="selectedColors=''" ng-model="selectedColors">
<option value="">Select Color</option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
Try it on Fiddle http://jsfiddle.net/CodecPM/qxyckf7u/

Answer 4

You need to do only two things
1)ng-init="days='noday'"
2)ng-selected="true"
<select class="filtersday" ng-init="days='noday'" ng-model="days">
<option ng-selected="true" value="noday">--Select Day--</option>

Answer 5

You should use single quote to work per
<select ng-model="liveDataType" ng-init="liveDataType='1'" class="form-control input height" required>
<option value="1">Running data</option>
<option value="2">Rest Data</option>
<option value="3">All Data</option>
</select>

Answer 6

Use ng-selected="true"
Check the below code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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>