title: Angular UI Typeahead can't set options (like footer template)
body: <p>I'd like to add a custom footer to the results where I can wire up some paging. I see that I can specify a footer template in the options, but can't find any examples of how to set those options from a controller. </p>
  
  <p>The footer template would display "Now showing 1-{{offsetEnd}} of {{result.count}} Load More</p>
  
  <p>Thank you everyone!</p>
  
  <p>This is the tag I'm using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt; input type = "text"
   id = "search"
   name = "search"
   ng - model = "profile.selectedProfile"
   typeahead = "o.itemvalue as o.itemtext for o in getProfiles($viewValue) | filter: $viewValue"
   typeahead - input - formatter = "formatLabel($model)"
   class = "form-control"
   autocomplete = "off" / &gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE</strong>
  I converted this to a directive, and incorporated a footer that displays the total record count.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function findProfile() {
    return {
      restrict: 'E',
      template: '&lt;input type="text" id="search" name="search" ng-model="selectedProfile" typeahead="o as o.itemtext for o in getProfiles($viewValue) | filter: $viewValue" typeahead-input-formatter="formatLabel($model)" class="form-control" autocomplete="off" /&gt;',
      controller: function($scope, $http) {
        $scope.itemCount = 0;
        $scope.getProfiles = function(searchtext) {
          return $http.get('http://localhost:61402/api/Profile/FindProfile?searchText=' + searchtext)
            .then(function(response) {
              $scope.itemCount = response.data.itemcount;
              return response.data.items;
            });
        }
  
        $scope.formatLabel = function(model) {
          return model == undefined ? '' : model.itemtext;
        }
  
      }
    };
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the template:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.run(['$templateCache',
    function($templateCache) {
      var template = '' +
        '&lt;ul class="dropdown-menu" ng-show="isOpen()" ng-style="{top: position.top+\'px\', left: position.left+\'px\'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}"&gt;' +
        '&lt;li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}"&gt;' +
        '&lt;div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"&gt;&lt;/div&gt;' +
        '&lt;/li&gt;' +
        '&lt;li&gt;Records Returned: {{$parent.itemCount}}&lt;/li&gt;' +
        '&lt;/ul&gt;';
  
      $templateCache.put('template/typeahead/typeahead-popup.html', template);
    }
  ])</code></pre>
  </div>
  </div>
  </p>