0

I have tried to follow the examples on the Angular 1.4.12 docs and what I've found here, still I cannot set a default value for a select menu.

My html (using controller as of mob):

<select name="userCurrencyType" 
   ng-model="mob.currencyType" 
   ng-options="s.name + ' - ' + s.code for s in mob.currencyTypes"></select>

Which correctly gives me a menu like:

enter image description here

Where my json is an array of objects:

[{ "code": "USD", "name": "United States Dollar" },
 { "code": "GBP", "name": "United Kingdom Pound" }...]

I want the default menu item to be the first item (USD). I have tried setting the ng-model to mob.currencyType and setting this in the controller both like:

  _this.currencyType = _this.currencyTypes[0];

and

_this.currencyType = { "code": "USD", "name": "United States Dollar" }

Neither approach gives me a default value set. What am I missing?

UPDATE

After some good suggestions from other users, and some experimenting, it would seem the problem was my data service call was not returning a promise:

  _this.currencyTypes = MockDataFactory.query({ filename: 'currency_codes' });

So I added

 _this.currencyTypes.$promise.then(function () {
    init();
  });

And then

  function init () {
    _this.currencyType = _this.currencyTypes[0];
  }
Community
  • 1
  • 1
Steve
  • 14,401
  • 35
  • 125
  • 230
  • There is a question [Here](http://stackoverflow.com/questions/40405483/how-do-i-set-the-default-option-for-select-with-angularjs/40408483) very similar. – lealceldeiro Nov 14 '16 at 18:13
  • I saw that. As you can see, I tried that but it is not working. ` _this.currencyType = _this.currencyTypes[0];` – Steve Nov 14 '16 at 18:14
  • works correctly here, after making some assumptions about the missing code bits: http://plnkr.co/edit/9FOxsbRUsUJgszcGMjKP?p=preview. If this isn't what you expect, you should expand your code to clearly demonstrate this not working. – Claies Nov 14 '16 at 18:18
  • 2
    as a side note, I would highly advise against using `ng-init`, even though it seems to have worked in the supplied answer. Firstly, the supplied answer changed your `ng-options` as well as used `ng-init`, and secondly, this is not what `ng-init` is intended for. – Claies Nov 14 '16 at 18:20
  • Is it because the data is being loaded from a factory? Perhaps something is not loaded when needed? – Steve Nov 14 '16 at 18:20
  • it's possible that something isn't matching up with the factory, but it's not really easy to just make guesses, which is why a [mcve] is very important. – Claies Nov 14 '16 at 18:21
  • 1
    I agree with @Claies, avoid the use of ng-init. – alphapilgrim Nov 14 '16 at 18:25
  • It was the data was not returned in a promise. See my updated question. – Steve Nov 14 '16 at 18:26

2 Answers2

0

You can set using ng-init

<select ng-model="currency" ng-init="currency='United States Dollar'"   ng-options="code.name as code.name for code in currencyTypes">
</select>

DEMO

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
0

What you have is fine, just include a track by: 

<select name="userCurrencyType" 
ng-model="mob.currencyType" 
ng-options="s.name + ' - ' + s.code for s in mob.currencyTypes track by s.code"></select>
Brandon
  • 984
  • 1
  • 11
  • 26