How to filter a select multiple by property name in AngularJS

Issue

I am trying to filter the options of a select multiple, using a text I type in a input text

<label for="countryFilter">Filter</label><br>
<input id="countryFilter" ng-model="countryFilter" type="text">
<label for="countries">Countries</label><br>
<select
  id="countries"
  ng-model="countries"
  ng-options="option.name for option in countryOptions track by option.id | filter:{name: countryFilter}"
  multiple>
</select>

I want to filter by country name but this code does not work. I also tried

 | filter:countryFilter"

any suggestion please?

Solution

you need to use track by after the filter

ng-options="option.name for option in countryOptions | filter: {name: countryFilter} track by option.id"
or
ng-options="option.name for option in countryOptions | filter: countryFilter track by option.id"

<select
  id="countries"
  ng-model="countries"
  ng-options="option.name for option in countryOptions | filter: {name: countryFilter} track by option.id"
  multiple>
</select>

codepen

Answered By - cmgchess