Angular expression for ngoptions on concatenated array

Question

I have an array from the backend that contains an array of objects that are options for a select box, let's say for countryselection:

$scope.countries = [
    { name: 'foo', code: 'ba' },
    { name: 'bar', code: 'br' },
    { name: 'biz', code: 'bb' }
];

This array is raw and reusable, and may update at any time through different functions that may change this array.

However, I want the selectbox to be prepended with a different option that is initially selected and implementation specific (so will not add this to the countries array to not pollute it for other consumers of the values):

$scope.defaultCountry = [
    { name: 'Select a country', code: '' }
];

Then I want this to work:

<select name="countryCode" model="model.country"
    ng-options="option.code as option.name for option in defaultCountry + countries">

</select>

where the defaultCountry + countries would be a concat of the 2 arrays. However, this concat does not work.

I know I can call a function to return the concatenated value, but if not required I would rather not:

$scope.getCountries = function () { 
    return $scope.defaultCountry.concat($scope.countries);
};

<select name="countryCode" model="model.country"
    ng-options="option.code as option.name for option in getCountries()">

</select>

Is there an out of the box solution to be able to use both 2 arrays at once for ng-options?

Answer 1

Use concat in ng-options

<select name="countryCode" ng-model="model.country"
ng-options="option.code as option.name for option in defaultCountry.concat(countries)">

</select>