Available options not showing in angular-typeahead drop down menu

Question

I've added angular-typeahead to a small angularjs app I'm writing, code built on an angularjs-example I downloaded. I've defined an array in the controller and can select an item in the view. I added ui.bootstrap in angular.module in app.js.

participants.js:

$scope.clubs = ['BBIL', 'STIL', 'Vikane IL'];

participants.html:

<div class="form-group">
  <input type="text" class="form-control" placeholder="Club" ng-model="participant.club" typeahead="club for club in clubs | filter:$viewValue">
</div>

When I select an item it's added to the text-box but the dropdown menu does not contain any text. What can I do to show the available items in the dropdown? There is maby some css magic that can be applied.

regards Claus

Answer 1

Found out why, the docs could be more clear about this. One need to include two files in the folder app/template/typeahead, namely typeahead-match.html and typeahead-popup.html. Got them at https://github.com/angular-ui/bootstrap/tree/master/template/typeahead. Now it works like a charm. :-)

Answer 2

It looks from your screen dump that something is outputted. The typeahead directive doesn't show the list at all if the filter doesn't match any items. Perhaps inspect the typeahead list in Chrome and see if you have some CSS that is hiding the text?