Change select to ui-select with ngRepeat filters

Question

I am using plain HTML select boxes to filter ngRepeat results, like so:

<select ng-model="theFilter.choice">
    <option value="">Any</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

<select ng-model="theFilter.otherChoice">
    <option value="">Any</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

<div class="col-xs-12" 
     ng-repeat="item in options | filter: { showMe: theFilter.choice, amIDeleted: theFilter.otherChoice }">
    <p>{{ item.showMe }}</p>
    <p>{{ item.amIDeleted }}</p>
</div>

This works as intended. But, like we all know the styling of the Browser select box is not very nice, so I am trying to replace the normal select boxes with ui-select select boxes, but these select boxes do not work correctly.

See plunker here

When the ui-select is changed first, nothing happens. But when the select box is selected first, the ui-select becomes available to use. I can then use both ui-select and the HTML5 select box. But I only want to use the ui-select.

My question is: Is there any way that I can use the ui-select instead of the normal select box to filter my results?

Answer 1

You can try like this working plunker example of ui-select with filter option of your example scenario:

Controller:

$scope.theFilter = { 
    showMe: $scope.options[0].showMe, 
    amIDeleted: $scope.options[0].amIDeleted  
};