Can AngularJS select directive have more than one null option?

Question

I have Angular select directive with ng-options. Also I have one null option:

<select ng-model="selected_company.current" ng-options="company.name for company in subcontractors">
    <option value="">Please select a company...</option>
</select>

But I would like to have another null option at the end of the list so the resulting list would be:

• Please select a company...
• Company1
• Company2
• Company3
• Company4
• New company...

I've tried with:

<select ng-model="selected_company.current" ng-options="company.name for company in subcontractors">
    <option value="">Please select a company...</option>
    <option value="">New company...</option>
</select>

But as you can guess nothing happens, second null option doesn't show anywhere. Is there some Angular way around this? I know that one alternative would be ng-repeating option elements instead of using ng-options.

Answer 1

Simple solution would be that I add another element to your original array:

In controller

$scope.companies = $scope.subcontractors + [{name: 'New company...'}] 

in html

<select ng-model="selected_company.current" ng-options="company.name for company in companies">
    <option value="">Please select a company...</option>
</select>

Or even better would be you only modify the html to the following

<select ng-model="selected_company.current" ng-options="company.name for company in subcontractors + [{name: 'New company...'}] ">
    <option value="">Please select a company...</option>
</select>