Using ui-typeahead to populate model with object but show string of that model

Question

Hello everyone I have the following code using ui-angular typeahead

<input type="text" ng-model="itemSelected"
           uib-typeahead="item.name for item in getItems()" id="itemInput" class="form-control">

the data that getItems() returns is of this structure:

[{itemId : 12345, name : "name of item"} ....]

Now what I would like to happen is the type ahead to give it's suggestions by showing item.name (which it currently does!) however what it does is sets itemSelected to the string not the object.

if I change the html such that the list comprehension reads item for item in getItems() I get the typeahead giving me the object (not what I want) although it does set the itemSelected variable to the object of my selected typeahead.

I would like the typeahead to display item.name but I would like the object item to be put into itemSelected. How can I achieve that?

Answer 1

You can try the following...it works fine

https://plnkr.co/edit/Zsgw5RKAEi5C2IKLcpGR?p=preview

<div>seleted state: {{state4}}</div>
        <input type="text" ng-change="onedit()"  ng-model="state4" uib-typeahead="state as state.name for state in states | filter:$viewValue | limitTo:8">