title: Using Bootstrap typeahead with Angular
body: <p>I am currently developing a web application which uses twitter-bootstrap and Angularjs in good harmony. However, I have problems with the typeahead and using it as a ng-model.</p>
  
  <p>Everything works fine when typing, but when I select an item (a suggestion), the value does not reflect in the Angular controller unless I change the value of the textbox after a value has been selected. Type -> Select -> Type works. Type -> Select does not work.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form ng-submit="addAssignment(assignName)"&gt;
    &lt;div class="input-append"&gt;
      &lt;input type="text" placeholder="Type a name" ng-model="assignName" ng-change="dostuff()" data-provide="typeahead" data-source="{{ teamNames }}"&gt;
      &lt;button class="btn" type="submit"&gt;Add&lt;/button&gt;
   &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Angular code:</p>
  
  <pre><code> $scope.addAssignment = function(name) {
      alert(name);
      return;
   }
  </code></pre>
  
  <p>I have added a ng-change function just to check when the model value is changed. It is only changed when typing manually, and NOT when a value is selected from the list that appears on typeahead.</p>
  
  <p>I appreciate any response that may help to resolve this issue. Thanks!</p>