bootstrap typeahead on input not displaying the key when a value is selected

Question

How do I select the states.address and wanted to display the state.address but the ng-model selPcode to have the state.postcode instead?

Here is a working jsfiddle http://jsfiddle.net/qbp2gqep/. Here is the json array object:
$scope.states = [{postcode:'B1',address:'Bull ring'}, {postcode:'M1',address:'Manchester'}];

Here is the html snippet: postcode <input type="text" ng-model="selPcode" /> typeahead <input type="text" ng-model="selPcode" typeahead="state.postcode as state.address for state in states | filter:$viewValue" typeahead-editable="false" />

I can either get the state.address or state.postcode but not the way I wanted i.e to display the state.address but internally the model should have the state.postcode.

Appreciate any help.

TIA.

Answer 1

You should be using ui-bootstrap typeahead as below

<input type="text" ng-model="selected" placeholder="Type your Address"
   uib-typeahead="state as state.address for state in states | filter:{address:$viewValue}"  
   class="form-control" typeahead-show-hint="true" typeahead-min-length="0">

LIVE DEMO