onselect not calling function when a match is selected error Uncaught ReferenceError: myFunction is not defined

I am trying to use bs-typeahead directive from angular-strap.

* Update *

http://mgcrea.github.io/angular-strap/#/typeaheads

I want a fucntion to be executed when a user selects something from the options. But this simple case is not seems to be working here and throwing error:

Uncaught ReferenceError: myFunction is not defined

Here is my syntax:

Template

<input type="text" class="form-control" ng-model="selectedState" bs-options="state for state in states" bs-on-select="myFunction()" placeholder="Enter state" bs-typeahead>

JS:

$scope.myFunction = function(){
  console.log("This function is called.")
  console.log($scope.selectedState);
}

Can anyone please help me here, if I am missing anything.

Here is my plunker: http://plnkr.co/edit/Z89TQ027WzxQn6UDJfAL?p=preview

Solution

Your linked Plunker has no errors, but if you want the function to be called on every change, remove the wrapping parenthesis:

bs-on-select="myFunction"

Right now you're calling it in place, and assigning the return value of the function (which is nothing) as the bs-on-select handler.