angularJS + UI bootstrap typeahead: filter:$viewValue doesn't work

Issue

I don't manage to get the filter:$viewValue work in an input with typeahead. I get the whole list displayed with the entered characters highlighted. I expect a filtered list depending on the characters entered.

Here is a plunker: http://plnkr.co/edit/X3C0fP52ZTi55LJtXfnu?p=preview

In my real project, I need to apply two filters as below.

<input autocomplete="off" 
  type="text" 
  placeholder="Selected Criteria"     
  ng-model="MgtCtrl.editActionData.selectedCriteria" 
  typeahead='criteria as criteria.name for criteria in MgtCtrl.criteriaList | criteriaByApplication:MgtCtrl.getTriggerApplication() | filter:$viewValue | orderBy:"name"'>

Solution

If your collection item is an object, then you need to specify which property the filter should take into account.

As per your example, the filter would look like this:

| filter:{'name':$viewValue}

Since you're displaying the name property, it may be the name you want to filter by, but I may be wrong. So you need to adequate it with your context.

References: https://docs.angularjs.org/api/ng/filter/filter

Answered By - Felipe Zigmundo