title: Angular Js Type Ahead call function on selection
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// https://angular-ui.github.io/
  
  // setup app and pass ui.bootstrap as dep
  var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
  
  // define factory for data source
  myApp.factory("States", function() {
    var states = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];
  
    return states;
  
  });
  
  // setup controller and pass data source
  myApp.controller("TypeaheadCtrl", function($scope, States) {
  
    $scope.selected = undefined;
  
    $scope.states = States;
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    max-width: 32em;
    margin: 1em auto 0;
  }
  img {
    width: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"&gt;&lt;/script&gt;
  &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"&gt;&lt;/script&gt;
  &lt;div ng-app="angularTypeahead"&gt;
    &lt;div class="container-fluid" ng-controller="TypeaheadCtrl"&gt;
      &lt;h2&gt;&lt;img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"&gt; Angular.js Typeahead&lt;/h2&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="states"&gt;Search for US States&lt;/label&gt;
        &lt;input name="states" id="states" type="text" placeholder="enter a state" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control"&gt;
      &lt;/div&gt;
      &lt;button class="btn btn-success" type="submit"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hello I am new to Angular js type ahead and I have used <a href="http://codepen.io/joe-watkins/pen/EagEWv" rel="nofollow"><code>codepen</code></a> to implement Type Ahead and completed successfully but I want to expand it like click on suggestion or selection I want to call angular js function and want to get that value.</p>
  
  <p>How can it could be possible to get that value on click?</p>
  
  <p>Any help would be appreciate!</p>