AnuglarUI Typeahead Work with Objects instead of SoureArray

The thing to ntice about the typeahead directive from http://angular-ui.github.io/bootstrap/ is that tries to mimic syntax used by the select directive from AngularJS. It means that all the expressions used to select a model to bind and a label are AngularJS expressions. This is turns means that you can use whatever AngularJS expression to calculate text of your label. For example, to display desired text you could write:

As far as your question regarding icons go – you could embed HTML in the label expressions but this gets awful to write and maintain. Fortunately the typeahead directive allows you to provide a custom template for your matched item, like so:

1

typeahead-template-url="itemTpl.html"

In the custom template you can use any expressions or AngularJS directive you would like. Adding icons becomes trivial with a little help from the ngClass directive: