How to display only property that has a match in array of objects? Typeahead

Question

Hi I have an array of objects that I want to filter using typeahead.

this is my input tag

<input type="text" ng-change="onedit()"  ng-model="selected" uib-typeahead="state as state.city for state in states | filter:$viewValue | limitTo:8">

This is the array I want to filter:

$scope.states = [
      {state: 'Alabama', firstName: "Jim"},
      {state: 'Alaska', firstName: "Tom"},
      {state: 'Arizona', firstName: "Alan"},
      {state: 'Arkansas', firstName: "Mark"},
      {state: 'California', firstName: "Maria"}
]

At the moment it displays only the state whether it matches the firstName or state. How can I make that it will display only firstName properties if it matches firstName and to display only states if it matches states

Here is my PLUNKER

The typeahead I am using I think is from angular-bootstrap.

I am pretty sure you can do that as I saw it in some online example but cannot find it.

Answer 1

Be specific with firstName property while applying filter.

uib-typeahead="state as state.city for state in states 
               | filter: { firstName: $viewValue} | limitTo:8">

Forked Plunker