How do I set the default option for select with AngularJS?

Question

I have been working on trying to set the default pre-selected option for angularJS and for some reason I can't. Here is a link to the relevant Plunkr.

Here is the relevant code:

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

I've tried ng-init and a bunch of different ways; I can't figure how to make the top option the preselected one.

Duplicate of [How to have a default option in select box - Angular.js](http://stackoverflow.com/questions/18194255/how-to-have-a-default-option-in-select-box-angular-js)? You mention you've tried `ng-init` a bunch of ways -- have you tried it in the specific way it's used in that answer? — apsillers, Nov 03 '16 at 15:33
the answer in the proposed close as duplicate will work, but I wouldn't recommend using it, as this is not what `ng-init` was designed for. — Claies, Nov 03 '16 at 15:50

score 3 · Accepted Answer · edited May 23 '17 at 12:16

3

The linked answer suggests using ng-init. I would go with assigning default option into selectedOption in controller or directive's link function:

$scope.selectedOption = options[0]

I don't see a need to use another directive for this simple task.

edited May 23 '17 at 12:16

Community

1
1

answered Nov 03 '16 at 15:32

Max Koretskyi

101,079
60
333
488

This worked. I am using an AJAX call to populate and thought it would be more complicated. On a related note, I am now having trouble setting the select within an ng-include template. It seems like copy-pasting the html causes the select statement to work fine, but just importing it via ng-include screws it up. – iamsampsan Nov 03 '16 at 15:57
@iamsampsan, edit your question please with supporting code – Max Koretskyi Nov 03 '16 at 16:08
@iamsampsan, what can I add to make my answer acceptable? – Max Koretskyi Nov 04 '16 at 07:22

score 1 · Answer 2 · answered Nov 03 '16 at 18:10

If what you want is to set one of the options pre-defined in options, in your ng-init do something like this $scope.selectedOption = <value> where <value> is the value property of the object you want to be marked as selected by default. For example 1 if your first object in options would be, {value: 1, name: "Option Number 1}. See code below:

$scope.options = [{value:1, name: "Option 1"}, {value:2, name: "Options 2"}];

$scope.selectedOption = 1;

On the other hand, if you only want to show a predefined option indicating the user to select one option (and not one of the options in your options)... This is a very simple (but effective way to achieve that). See code below:

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

score 0 · Answer 3 · answered Nov 03 '16 at 15:32

just update model of the element i.e. selectedOption='yourDefaultValue'

What is the version of angular are you using? if the latest one, then you can use below code::

    <select 
      ng-model="selectedOption" [ng-value]='yourDefaultValue'`
      ng-options="option.value as option.name for option in options">
    </select>

score 0 · Answer 4 · answered Nov 03 '16 at 15:42

Link to updated plunkr : http://plnkr.co/edit/SkS0NqyXpnMcddu80anf?p=preview

Updating model code moved in the function and also select as and track by should be avoided as mentioned in the angular doc

Be careful when using select as and track by in the same expression.

How do I set the default option for select with AngularJS?

4 Answers4

Linked

Related