Having encountered the same issue as described in this question:
Bootstrap-UI Typeahead display more than one property in results list?
I made adjustments to the Plunker provided in the answer to fit my requirements:
http://plnkr.co/edit/FdkvCUUD3ob7dt256Bgd?p=preview
However, I noticed that they were using angular-ui version 0.5 and Angular version 1.0.5.
In my project, I am utilizing Angular version 1.4.9 and Angular-ui version 1.3.3 but encountering issues where my results are either not displaying or appearing as undefined.
Controller
app.controller('testController', ['$scope', function ($scope) {
$scope.sites = JSON.parse("[{\"SITE_CODE\":\"CODE1\",\"SITE_NAME\":\"NAME1\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE2\",\"SITE_NAME\":\"NAME2\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE3\",\"SITE_NAME\":\"NAME3\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE4\",\"SITE_NAME\":\"NAME4\",\"ADDRESS\":\"\"}]");
}]);
HTML
<div class="row">
<div class="col-xs-4">
<div class="typeahead">
<input type="text" class="form-control" ng-model="test" uib-typeahead="site as site.SITE_CODE for site in sites"
typeahead-no-results="noResults" typeahead-popup-template-url="siteList.html" />
</div>
</div>
</div>
<div class="row" ng-show="noResults">
<div class="col-sm-6">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
</div>
</div>
<script type="text/ng-template" id="siteList.html">
<div class="row">
<a tabindex="-1">
<div class="col-xs-4">
<span ng-bind-html-unsafe="match.model.SITE_CODE | typeaheadHighlight:query"></span>
</div>
<div class="col-xs-4">
<span ng-bind-html-unsafe="match.model.SITE_NAME | typeaheadHighlight:query"></span>
</div>
</a>
</div>
</script>
Any suggestions on what might be causing the issue?