How to have a default option in Angular.js select box

How to have a default option in Angular.js select box

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

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.

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

Solutions/Answers:

Solution 1:

You can simply use ng-init like this

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

Solution 2:

If you want to make sure your $scope.somethingHere value doesn’t get overwritten when your view initializes, you’ll want to coalesce (somethingHere = somethingHere || options[0].value) the value in your ng-init like so:

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

Solution 3:

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.

Solution 4:

Only one answer by Srivathsa Harish Venkataramana mentioned track by which is indeed a solution for this!

Here is an example along with Plunker (link below) of how to use track by in select ng-options:

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

If selectedCity is defined on angular scope, and it has id property with the same value as any id of any city on the cities list, it’ll be auto selected on load.

Here is Plunker for this:
http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

See source documentation for more details:
https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

Solution 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

Solution 6:

The accepted answer use ng-init, but document says to avoid ng-init if possible.

The only appropriate use of ngInit is for aliasing special properties
of ngRepeat, as seen in the demo below. Besides this case, you should
use controllers rather than ngInit to initialize values on a scope.

You also can use ng-repeat instead of ng-options for your options. With ng-repeat, you can use ng-selected with ng-repeat special properties. i.e. $index, $odd, $even to make this work without any coding.

$first is one of the ng-repeat special properties.

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

———————- EDIT —————-
Although this works, I would prefer @mik-t’s answer when you know what value to select, https://stackoverflow.com/a/29564802/454252, which uses track-by and ng-options without using ng-init or ng-repeat.

This answer should only be used when you must select the first item without knowing what value to choose. e.g., I am using this for auto completion which requires to choose the FIRST item all the time.