151

I've seen the documentation of the Angular select directive here: http://docs.angularjs.org/api/ng.directive:select. I can't figure how to set the default value. This is confusing:

select as label for value in array

Here is the object:

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

The html (working): 

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

and then I'm trying to add an ng-option attribute inside the select element to set prop.value as the default option (not working).

ng-options="(prop.value) for v in prop.values"

What am i doing wrong?

François Romain
  • 13,617
  • 17
  • 89
  • 123

12 Answers12

132

So assuming that object is in your scope:

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

 

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

Working Plunkr: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

Jason Swett
  • 43,526
  • 67
  • 220
  • 351
James Kleeh
  • 12,094
  • 5
  • 34
  • 61
  • 2
    ok i got it! the `ng-option` is replacing the `` thanks again – François Romain Jun 26 '13 at 20:55
  • 2
    There has got to be a simpler way to do this, I find this very complicated for a simple select default value in angular js – Edmund Rojas Jul 30 '15 at 01:15
  • 1
    ng-option directive is somewhat complicated and confusing on its syntax. I think the flexibility to bind objects has made it a bit complicated. The way I try to remember this is that whenever I am using an object, I explicitly indicate what properties to use for the value/text attributes of the select control. For more information see this: http://www.ozkary.com/2015/08/angularjs-ngoption-directive-simplified.html – ozkary Sep 04 '15 at 14:57
  • 2
    if you want to build a select in the view without writing out the options and have one selected `` – asherrard May 06 '16 at 15:50
  • 1
    @james Kleeh ..here u are hardcoding the first option since u know them.But if we dont know the options and how can we display the first one by default? – H Varma Nov 23 '16 at 11:33
  • 1
    @HVarma `values[0]` ? – James Kleeh Dec 04 '16 at 18:28
  • 1
    Does anyone know how to add default value as "Select option" as a default value – Gaurav Jan 05 '17 at 10:10
  • could you please let me know why alert is not showing any value. and how will it show? http://plnkr.co/edit/CtgKthXCOjxxtB78?preview – Shubham Jul 22 '20 at 07:11
69

The angular documentation for select* does not answer this question explicitly, but it is there. If you look at the script.js, you will see this:

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // Default the color to red
}

This is the html:

<select ng-model="color" ng-options="c.name for c in colors"></select>

This seems to be a more obvious way of defaulting a selected value on an <select> with ng-options. Also it will work if you have different label/values.

* This is from Angular 1.2.7

Jess
  • 23,901
  • 21
  • 124
  • 145
  • This worked for me, I doubt this will come up again but I'm currently using AngularJS v1.2.27 in case anyone finds this and is wondering about compatibility. – Robert Cadmire Aug 03 '17 at 15:01
44

This answer is more usefull when you are bringing data from a DB, make modifications and then persist the changes.

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

Check the example here:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

Humberto Morera
  • 1,109
  • 10
  • 10
  • 1
    Finally a working answer here, upvoted! Also with this solution you can have the undefined option worknig properly. – Playdome.io Apr 25 '17 at 14:14
  • So glad this post exists, I've been searching a while for a solution and this one has resolved my issue. – slee423 May 14 '18 at 20:06
23
<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>
nirav
  • 291
  • 2
  • 4
21

If your array of objects are complex like:

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

And your current model was set to something like:

$scope.user.friend = {name:John, uuid: 1234};

It helped to use the track by function on uuid (or any unique field), as long as the ng-model="user.friend" also has a uuid:

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>
BatteryAcid
  • 8,381
  • 5
  • 28
  • 40
10

I struggled with this for a couple of hours, so I would like to add some clarifications for it, all the examples noted here, refers to cases where the data is loaded from the script itself, not something coming from a service or a database, so I would like to provide my experience for anyone having the same problem as I did.

Normally you save only the id of the desired option in your database, so... let's show it

service.js

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

controller.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

Finally the partial html model.html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

basically I wanted to point that piece "model.id_model as model.name for model in models" the "model.id_model" uses the id of the model for the value so that you can match with the "mainObj.id_model" which is also the "selected_model", this is just a plain value, also "as model.name" is the label for the repeater, finally "model in models" is just the regular cycle that we all know about.

Hope this helps somebody, and if it does, please vote up :D

Wiston Coronell
  • 3,087
  • 3
  • 20
  • 27
  • 1
    you could just bind the select to `mainObj.id_model` directly (`ng-model="mainObj.id_model"`), rather than using a 'placeholder / plain value' variable `selected_model` – drzaus Aug 20 '14 at 13:53
  • yes, indeed, I just wanted to show that it could be done with a value directly within the $scope, but thanks for pointing that out. – Wiston Coronell Aug 21 '14 at 05:00
  • Is it possible to bind to an object and not just an int? I cant get my nGoptions to set its selected item because it doesnt know how to bind my {id:24} to my [{id:23},{id:24},{id:25}]. – Victorio Berra Feb 26 '15 at 17:34
  • you can always use $index to get the position, however, yes it is possible to bind to an object – Wiston Coronell Mar 03 '15 at 17:45
  • You can also use ng-options="model.name for model in models track by model.id_model" – Ε Г И І И О Nov 21 '20 at 10:31
10
<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

Just add option with empty value. It will work.

DEMO Plnkr

Surya R Praveen
  • 3,393
  • 1
  • 24
  • 25
8

An easier way to do it is to use data-ng-init like this:

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

The main difference here is that you would need to include data-ng-model

Wyetro
  • 8,439
  • 9
  • 46
  • 64
  • 3
    As specified in the docs: 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. – user12121234 Jul 14 '15 at 18:18
  • 1
    The way I posted, with ng-options is much easier and more concrete. Both ways work. – Wyetro Jul 14 '15 at 18:20
4

The ng-model attribute sets the selected option and also allows you to pipe a filter like orderBy:orderModel.value

index.html

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

controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];
David Douglas
  • 10,377
  • 2
  • 55
  • 53
1

If anyone is running into the default value occasionally being not populated on the page in Chrome, IE 10/11, Firefox -- try adding this attribute to your input/select field checking for the populated variable in the HTML, like so:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />
code_maestro
  • 21
  • 4
1

Really simple if you do not care about indexing your options with some numeric id.

  1. Declare your $scope var - people array

     $scope.people= ["", "YOU", "ME"];

  2. In the DOM of above scope, create object

     <select ng-model="hired" ng-options = "who for who in people"></select>

  3. In your controller, you set your ng-model "hired".

     $scope.hired = "ME";

It's really easy!

halfer
  • 19,824
  • 17
  • 99
  • 186
Jenna Leaf
  • 2,255
  • 21
  • 29
0

Just to add up, I did something like this.

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>
tyne
  • 97
  • 5