angularJS - add a Static option with ng-options

Question

I am using ng-options to print all the options for a form in my angular app. I get the value directly from my database which gives me a list of countries:

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">

Here when the page is loaded, the select doesnt show anything, i.e. there is no placeholder whereas I'd like to print a static value like "anywhere" without having to add it in my "countries" list.

I have tried this:

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
<option>Anywhere</option>
</select>

But it's not working

Does anyone have an idea how to solve this?

Thanks

Answer 1

This is probably a late post but you should almost never use ng-repeat where ng-options is better suited like this case because new scopes are created in ng-repeat and thus you'd have more overhead.

The solution to your problem is well written in the angular docs and what you need looks somewhat like

<select ng-options="country.country for country in countries"
        ng-model="selectedCountry"
        ng-change="updateSelectedCountry(selectedCountry)"
       class="form-control">
   <option value="" disabled>Anywhere</option>
</select>

With this angular uses the value="" to set a null value and starts iteration from after that value.

Answer 2

You could always just do this:

<select ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
    <option>Anywhere</option>
    <option ng-repeat="country.country for country in countries">{{country.country}}
    </option>
</select>

Here is my fiddle example

Hope this helps!