<!-- first define a popup template 'popup.html' that appears with the search result -->
<div class="custom-popup-wrapper"
ng-style="{top: position().top+'px', left: position().left+'px'}"
style="display: block; min-width: 100%;"
ng-show="isOpen() && !moveInProgress"
aria-hidden="{{!isOpen()}}">
<ul class="dropdown-menu" role="listbox" style="display: block">
<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}}">
<a href="{{match.model.href}}">
<span ng-bind-html="match.model.name | uibTypeaheadHighlight:query"></span>
</a>
</li>
</ul>
</div>
<!-- then define get function to return remote data -->
$scope.getResults = function(viewValue) {
return $http.get(baseURL+'/some/rest/call?key='+viewValue);
}
<!-- finally display the popup from the main html -->
<input type="text" ng-model="modelName" class="form-control" placeholder="Type in your search term"
<!-- loop through objects returned by get function defined in controller, display their names ($viewValue is an angular variable containing the value typed in by the user) -->
uib-typeahead="object as object.name for object in getResults($viewValue)"
<!-- call previously defined template (relative to the project folder) -->
typeahead-popup-template-url="views/popup.html"
<!-- define booleans for search status (still loading / no result) -->
typeahead-loading="loadingResults" typeahead-no-results="noResults">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>