Typeahead doesn't display text in dropdown

Question

UPDATE

Plunker demo here.

Original Question

I've set up typeahead with angular bootstrap. Everything is working expect that none of the text is displayed.

My html...

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"></input>

My JS...

angular.module('controllers')

.controller('BudgetTrackersCtrl', ["$scope", function($scope) {

  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

}]);

My console returns no errors.

When I type in text into the inpt, I see the dropdown with the appropriate number of results returned, but no text. The left image is when the dropdown first appears and the image on the right is when my mouse hovers over one of the selections.

The html of the li is below:

<li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" class="ng-scope active">
  <a tabindex="-1" ng-click="selectMatch($index)" ng-bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
</li>

What's wrong and how do I fix this?

Answer 1

You forgot to add //angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js as a script.

Here is working version plunker