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:

Answer 1

The solution of your problem is to initiate an object in your template controller scope like this:

$scope.typeaheadObject = {
   query : '',
}

now in your form you will need to change your ng-model with:

ng-model="typeaheadObject.query'

This will create the object typeaheadObject in all your controller if you don't re-initiate it in one of your controller. So when you will want to access to the content of the object in one of this controller you will just have to do for example:

console.log($scope.typeaheadObject.query)

This is a classical issue in angularJs. You only can access and modify a parent scope if the variable is stock in an object

Finally you have to use a '.' in your ng-model. This will permit your ui-bootstrap module and your own module to share their scope with the object.

I just did an example on plunker to be sure you understand well the issue.

http://plnkr.co/edit/4YWNMagm571Gk2DrCERX?p=preview

Have a good day :)