how to use ng-option to set default value of select element

Question

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      lt select gt  lt option ng-repeat  value in prop values  gt   value   lt  option gt  lt  select gt    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

User · Answer

lt select name  partyid  id  partyid  class  span3  gt   lt option value    gt Select Party lt  option gt   lt option ng-repeat  item in partyName  value    item  id    ng-selected  obj partyname    item partyname  gt   item partyname    lt  option gt   lt  select gt

User · Answer

This answer is more usefull when you are bringing data from a DB  make modifications and then persist the changes     lt select  ng-options  opt id as opt name for opt in users  ng-model  selectedUser  gt  lt  select gt    Check the example here    http   plnkr co edit HrT5vUMJOtP9esGngbIV

User · Answer

So assuming that object is in your scope    lt div ng-controller  MyCtrl  gt     lt select ng-model  prop value  ng-options  v for v in prop values  gt     lt  select gt   lt  div gt     nbsp   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

User · Answer

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    lt select ng-model  color  ng-options  c name for c in colors  gt  lt  select gt    This seems to be a more obvious way of defaulting a selected value on an  lt select gt  with ng-options   Also it will work if you have different label values     This is from Angular 1 2 7

User · Answer

lt select id  itemDescFormId  name  itemDescFormId  size  1  ng-model  prop  ng-change  update    gt       lt option value    gt English EN  lt  option gt       lt option value  23  gt Corsican CO  lt  option gt       lt option value  43  gt French FR  lt  option gt       lt option value  16  gt German GR  lt  option gt      Just add option with empty value  It will work   DEMO Plnkr

User · Answer

Just to add up  I did something like this     lt select class  form-control  data-ng-model  itemSelect  ng-change  selectedTemplate itemSelect   autofocus gt           lt option value  undefined   selected   itemSelect Name    undefined  disabled  disabled  gt Select template    lt  option gt           lt option ng-repeat  itemSelect in templateLists  value    itemSelect ID    gt   itemSelect Name   lt  option gt  lt  select gt

User · Answer

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    lt select ng-model  user friend   ng-options  friend as friend name for friend in friends track by friend uuid  gt    lt  select gt

User · Answer

The ng-model attribute sets the selected option and also allows you to pipe a filter like orderBy orderModel value  index html   lt select ng-model  orderModel  ng-options  option name for option in orderOptions  gt  lt  select gt    controllers js   scope orderOptions           name   Newest   value   age          name   Alphabetical   value   name        scope orderModel    scope orderOptions 0

User · Answer

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   lt select ng-model  selected model   ng-options  model id model as model name for model in models   gt  lt  select gt    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

User · Answer

Really simple if you do not care about indexing your options with some numeric id    Declare your  scope var - people array   scope people        YOU    ME     In the DOM of above scope  create object   lt select ng-model  hired  ng-options    who for who in people  gt  lt  select gt   In your controller  you set your ng-model  hired     scope hired    ME      Good luck     It s really easy

User · Answer

An easier way to do it is to  use data-ng-init like this    lt select data-ng-init  somethingHere   options 0   data-ng-model  somethingHere  data-ng-options  option name for option in options  gt  lt  select gt    The main difference here is that you would need to include data-ng-model

User · Answer

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    lt input data-ng-model  vm x  data-ng-if  vm x         amp  amp  vm x     undefined  amp  amp  vm x     null    gt

[angularjs] how to use ng-option to set default value of select element

Examples related to angularjs