HTML select using ng-options with multiple “default” options

Question

I am currently trying to make a drop down menu that runs off of a model but also has two " default " options that are at the top. Currently I have the following:

<select class="category-selector" chosen
        inherit-select-classes="true"
        ng-if="auction.category_options.length > 1"
        ng-model="auction.active_category"
        ng-options="g.label group by g.main_category for g in auction.category_options"
        ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
  <option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
  <option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>

I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?

Image of dropdown

Answer 1

Adding extra option tags only works if you set value="" for the additional options

<option value="" selected>...</option>

As soon as the value isn't empty, it will not show, as explain here . So you will probably need build this using ng-repeat .

In this answer, there is a solution using a directive , maybe that could work.