How to have a default option in Angular.js select

Question

I have searched Google and can't find anything on this.

I have this code.

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

With some data like this

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

And the output is something like this.

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

How is it possible to set the first option in the data as the default value so you would get a result like this.

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

Answer 1

Try this:

HTML

<select 
    ng-model="selectedOption" 
    ng-options="option.name for option in options">
</select>

Javascript

function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        }, 
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

Plunker here.

If you really want to set the value that will be bound to the model, then change the ng-options attribute to

ng-options="option.value as option.name for option in options"

and the Javascript to

...
$scope.selectedOption = $scope.options[0].value;

Another Plunker here considering the above.

Answer 2

Depending on how many options you have, you could put your values in an array and auto-populate your options like this

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

Answer 3

In response to Ben Lesh's answer, there should be this line

ng-init="somethingHere = somethingHere || options[0]" 

instead of

ng-init="somethingHere = somethingHere || options[0].value" 

That is,

<select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0]"
        ng-options="option.name for option in options track by option.value">
</select>

Answer 4

If you are using ng-options to render you drop down than option having same value as of ng-modal is default selected. Consider the example:

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

So option having same value of list.key and selectedItem, is default selected.

Answer 5

I think, after the inclusion of 'track by', you can use it in ng-options to get what you wanted, like the following

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

This way of doing it is better because when you want to replace the list of strings with list of objects you will just change this to

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

where somethingHere is an object with the properties name and id, of course. Please note, 'as' is not used in this way of expressing the ng-options, because it will only set the value and you will not be able to change it when you are using track by

Answer 6

I would set the model in the controller. Then the select will default to that value. Ex: html:

<select ng-options="..." ng-model="selectedItem">

Angular controller (using resource):

myResource.items(function(items){
  $scope.items=items;
  if(items.length>0){
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  }
});