AngularJS: Select option is not selected by default

Question

Hi My current scenario is this: I want a default value too that should select.. Even if select is selected then also acceptable.. but it is blank at first..My code is this

<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
</select>

I'ave used this code too but not working :(

<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
    <option selected="selected">Select</option>
</select>

Checkout my code please.

score 2 · Answer 1 · answered Jan 11 '16 at 09:12

var myApp = angular.module('myApp', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <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>

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

You can modify your code like this :

<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
    <option value="">Select</option>
</select>

here is the plnkr : http://plnkr.co/edit/fekkRctRM59ydI6zDnpY?p=preview

or you can use ng-init like as mentioned by @zsong

<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-init="selectedItem='YourDefaultValue'" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">

    </select>

Or you can look at this

edited May 23 '17 at 11:52

Community

1
1

answered Jan 11 '16 at 09:45

Shoaib

822
1
15
27

thanks for your answer but both of these solutions are not working.. checkout my [plunker](http://plnkr.co/edit/lw3BZLZdEwbwLYGZu7et?p=preview) – Tech Kid Jan 11 '16 at 10:11
@TechKid I have modified your plunker checkout http://plnkr.co/edit/fekkRctRM59ydI6zDnpY?p=preview – Shoaib Jan 11 '16 at 10:16

score 2 · Answer 3 · answered Jan 11 '16 at 11:17

2

Code for to displays by default Select options

<select ng-model="your model" ng-options="your options">
<option selected="selected" value="">Select options</option>
</select>

answered Jan 11 '16 at 11:17

Mahantesh Kumbar

255
1
10

score 1 · Answer 4 · answered Jan 11 '16 at 09:11

1

Your ngModel is selectedItem, so you have to set selectedItem to the value which you want as default in your controller:

//This sets the default value to the first item in your list
$scope.selectedItem = $scope.task.dropdownvalues[0].value

answered Jan 11 '16 at 09:11

Tarun Dugar

8,921
8
42
79

score 1 · Answer 5 · answered Jan 11 '16 at 09:12

1

You should not have an option tag if using an ng-option

utilize ng-model instead as below.

<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">

in your controller

$scope.selectedItem = dropdown_values[0];

will resolve your issue.

answered Jan 11 '16 at 09:12

Wasimakram Mulla

511
7
24

Ops it is not working bro :( my because in my scenario I have array of 100 tasks. and in each task it has drop down value.. and when i initialize your suggested `$scope.selectedItem` in my controller it says `dropdown_values` is not defined.. – Tech Kid Jan 11 '16 at 09:27
it would be $scope.dropdown_values... Well can you please share a plunkr I would help you out with it. – Wasimakram Mulla Jan 11 '16 at 09:29
Use ng-repeat instead of ng-option and it will by default select an option for you. As you are having select element inside and ng-repeat you cannot set ng-model because it is in loop and you are assigning ng-model to 2 input at the same time to different elements in loop. Its better you can use ng-repeat I have **modified your plunkr** for the same, kindly check – Wasimakram Mulla Jan 11 '16 at 10:02
Sir, I can't see the modification into my current plunker. Please sure Did u save the changes ? – Tech Kid Jan 11 '16 at 10:15
Did u made changes into my this [plunker](http://plnkr.co/edit/UtQZsb8rkTovFEsc7SRR?p=preview)? – Tech Kid Jan 11 '16 at 10:17
`` I am not able to save the changes as I do not have rights but above is the changed code. – Wasimakram Mulla Jan 11 '16 at 10:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100375/discussion-between-tech-kid-and-wasim-mulla). – Tech Kid Jan 11 '16 at 12:35

score 1 · Answer 6 · answered Jul 30 '18 at 16:40

Many times I have spend hours to find out the solution, believe me!

[ 1 ] Select Option with Numbers (Used in Pagination, Page Size Selection)

<select id="select_pagination_pages" ng-model="recordsInPage">
    <option value="10" selected>10</option>
    <option value="15">15</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="50">50</option>
    <option value="75">75</option>
    <option value="100">100</option>
    <option value="150">150</option>
    <option value="200">200</option>
    <option value="250">250</option>
</select>

Inside Controller, particular page init function, I have inserted 10 as String.

$scope.recordsInPage = "10".toString();

[ 2 ] Second Select Option is with simple yes or no selection.

<select class="rfc_text" id="select_flag" ng-model="rfc.flag">
    <option value="yes" selected>YES</option>
    <option value="no">NO</option>
</select>

Inside Controller initialized rfc.flag like -

$scope.rfc.flag = "yes";

[ 3 ] This third one Select Option is special and with tiny scenario, where model will only use last four option values, but the first one is selected by default.

<select id="select_timezone" ng-model="timezone_search">
    <option value="" selected>Search Entire</option>
    <option value="CountryCode">Country Code</option>
    <option value="CountryName">Country Name</option>
    <option value="TimeZone">Time Zone</option>
    <option value="TimeOffset">Time Offset</option>
</select>

Inside page controller init -

$scope.timezone_search = "";

I think three examples would be enough for peoples. :D

AngularJS: Select option is not selected by default

6 Answers6