access controller scope from Bootstrap-UI Typeahead template

Question

I am unable to call a controller function from inside a custom-template with ui-typeahead:

<input typeahead="val for val in autoComplete($viewValue)"
  typeahead-template-url="searchAutocompleteTpl.html"  
  ng-model="query"/>

<script type="text/ng-template" id="searchAutocompleteTpl.html">
  <span ng-repeat="eqp in match.model.equipment"/>
    <a href="" ng-click="showItem(eqp.model)">
      found in: {{eqp.model}}
    </a>
</script>

The problem is that the controller's scope seems to be absent in the template:

showItem(eqp.model)

is never called. I have also tried with:

$parent.showItem(eqp.model)

to no avail.

How can I call a function/value on the controller's scope then?

Answer 1

I ran into the same problem and had a look at the typeahead code on github to see if that might offer any clues. It appears that there are several directives involved in the creation of the suggestions list and each gets its own child scope.

In other words, your $parent.showItem(eqp.model) was a good attempt, but you didn't go up enough levels. What worked for me was: $parent.$parent.$parent.showItem(eqp.model)