angularjs - Create custom angular-bootstrap typeahead data -

i having trouble creating list bootstrap's ui-typeahead directive:

an $http-call returns following json:

[{"title":"foo", "equipment":[{"model":"model 1"}, {"model":"model 2"}], "combine":"true"}] 

what need :

1. concatenate title "foo" input user has typed in input field ,
2. create list of equipments : "model 1" , "model 2" (the actual dropdown-data) either 2 separate drop-down items or concatenate "model 1" , "model 2" if "combine" set "true" yield 1 drop-down item.

upon clicking on 1 of "equipment" entries in drop-down need call function sets chosen model in service object , calls $location's url function.

is possible?

here's template using via "typeahead-template-url":

<input typeahead="val val in autocomplete($viewvalue)"   typeahead-template-url="searchautocompletetpl.html"     ng-model="query"/>  <script type="text/ng-template" id="searchautocompletetpl.html">   <span>found in: </span>   <div ng-repeat="eqp in match.model.equipment">     <a href="" ng-click="showitem(eqp.model)">       {{eqp.model}}     </a>   </div> </script> 

you need update template:

<script type="text/ng-template" id="searchautocompletetpl.html">   <span>found in: {{match.model.title}}{{query}}</span>   <div ng-show="match.model.combine=='true'" ng-repeat="eqp in match.model.equipment">     <a href="" ng-click="showitem(eqp.model)">       {{eqp.model}}     </a>   </div>   <div ng-show="match.model.combine=='false'">     <a href="" ng-click="showitem(eqp.model)" ng-repeat="eqp in match.model.equipment">       {{eqp.model}}     </a>   </div> </script> 

for question 1 check <span>found in: {{match.model.title}}{{query}}</span>. model 'query' can access entered value , concatanate title it.

for question 2 used different divs , show appropriate 1 based on combine value.

i made fiddler, hope helps (it not beauty works).

zolir