ng-options: how to put empty option at the end?

Question

Currently, I've got something like this (simplified):

<select ng-model=model.policyHolder ng-options="person.index as person.name for person in model.insurance.persons">
  <option value>Someone else
</select>

This creates a dropdown with options for person names and an empty one for "someone else" at the top. The question is, how do I get that empty option at the bottom of the dropdown?

I would very much like to keep using ng-options for this, especially since controlling the position of the default option seems like too small a change to justify the slightly more verbose <option ng-repeat> way.

Thanks!

Answer 1

use option with value=""

Like:

<select ng-model="model.policyHolder" ng-options="person.index as   person.name for person in model.insurance.persons">
  <option value="">Someone else</option>
</select>

If you want to show Someone else at the bottom when click on drop-down list you can use.

<select ng-model="model.policyHolder">
    <option ng-repeat="person in model.insurance.persons" value="{{person.index}}">{{person.name}}</option>
    <option value="">Someone else</option>
</select>