AngularJS UI Typeahead label and value

Question

I am using the typehead directive to autocomplete a list of states. The list contains a bunch of objects as follows

{
  StateId: 0,
  StateCode: "AK",
  StateDesc: "ALASKA"
}

The typehead HTML is as follows

typeahead="state.StateCode for state in States | filter:$viewValue | limitTo:8"

This works great as is however I'd like to improve it a little bit. Is it possible to have the autocomplete dropdown to show (and search on) StateDesc but once you click on the drop down item the textbox was populated with StateCode?

Thanks!

Answer 1

The HTML needs to be

typeahead="state.StateCode as state.StateDesc for state in States | filter:$viewValue | limitTo:8"

Thanks to Pushpak for pointing me in the right direction.

Answer 2

Assuming you are using angular-ui bootstrap typeahead, heres a plunkr of how this can be achieved easily.

http://plnkr.co/edit/NpWC6qvrzx7swGRFlpUR?p=preview