title: Updating the model from a typeahead-on-select
body: <p>Consider the following in the body of my <code>html</code> file:</p>
  
  <pre><code>&lt;html&gt;
  ...
  &lt;body&gt;
  ...
  &lt;div class='container-fluid' ng-controller="TypeaheadCtrl"&gt;
  &lt;input type="text" ng-model="selected" typeahead="name as entry.name for entry in entries | filter:{name: $viewValue} | limitTo:8" 
                   typeahead-on-select='onSelect($item, $model, $label)'
                   class="form-control"&gt;
  
  {{selection_made}}
  &lt;/div&gt;
  &lt;body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>where <code>entries</code> are populated somewhere else. And then this in the controller:</p>
  
  <pre><code>angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {
          ...
          $scope.onSelect = function ($item, $model, $label) {
                  $scope.$selection_made = $item;
          };
  ...
  });
  </code></pre>
  
  <p>I have the autocomplete working, but the selection callback doesn't seem to work well. 
  I was expecting <code>{{selection_made}}</code> to display whatever is selected, but instead the literal text <code>{{selection_made}}</code> gets rendered. Why? What am I missing?</p>
  
  <p>Note: I used <a href="https://stackoverflow.com/a/17994624/283296">this answer</a> for reference.</p>