angular-ui typeahead custom template

Question

I want to customize the typeahead dropdown to show "name" and "original". The json source is in the form

[
...
   {
    "_id": "56d0524c07e5a2940eb059c6",
    "name": "english name",
    "original": "original name",
    "__v": 0
   },
...
]

As I saw in docs, I tried this custom template:

<script type="text/ng-template" id="custom.html">
<a>
    <span ng-bind-html="match.label.name | uibTypeaheadHighlight:query"></span>
    <small ng-bind-html="match.label.original | uibTypeaheadHighlight:query"></small>
</a>

<input type="text" ng-model="$parent.model.referringCourt" typeahead-template-url="custom.html" uib-typeahead="item.name as item for item in search($viewValue)">

It doesn't work. The current result I get is on selection I see a single string in model, not the whole object selected. What's the proper way to:

• use a custom template with 2 (or 3) values

• define which one have to be shown in input field

• keep the whole object as model

Answer 1

It looks I solved by myself, actually the example "Custom templates for results" is pretty much what I was looking for. The solution is filter the source like that

 uib-typeahead="item as item.name for item in search($viewValue) | filter:{name:$viewValue}"