Typeahead plugin in angular-bootstrap not working for me

Question

I can't get typeahead feature in angular-bootstrap to work in a simple yeoman-generated environment. What I'm expecting is to be able to start typing into an input field and have a dropdown show matches for the characters typed into the input field. The set of items to match is ['alpha', 'beta', 'gamma', 'delta'] but if I type a, nothing shows up but they should all show up since a is common to all. Appreciate any help.

Here are the steps I took to set up my test application:

$ yo angular
Include twitter bootstrap Y
Twitter bootstrap with Compass N
Included all modules and took defaults for the rest

$ bower install angular-bootstrap --save

$ bower install angular-ui-bootstrap --save

Edited app/views/main.html (snippet):

            <div class="jumbotron">
                <h1>'Allo, 'Allo!</h1>
                <p class="lead">Always a pleasure scaffolding your apps.</p>
                <p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
            </div>

            <!-- Added this to verify that $scope.shows is available (and it is) -->
            <h2>Shows</h2>
            <ul ng-repeat="show in shows">
            <li>{{show}}</li>
            </ul>

            <!-- This is what is not working -->
            <h2>typeahead</h2>
            <input type="text" ng-model="selected" typeahead="show for show in shows | filter:$viewValue | limitTo:8" class="form-control">

            <div class="row marketing">
                <h4>HTML5 Boilerplate</h4>

Edited app/scripts/controllers/main.js:

            'use strict';

            angular.module('wtfoApp', ['ui-bootstrap'])
              .controller('MainCtrl', function ($scope) {
                $scope.awesomeThings = [
                  'HTML5 Boilerplate',
                  'AngularJS',
                  'Karma'
                ];
                $scope.shows = ['alpha', 'beta', 'gamma', 'delta'];
              });

Many thanks.

Edit: Forgot dependency [ui-bootstrap]. It could be the solution to my problem but I am having trouble adding it. Firebug complains that it can't find ui-bootstrap. I also tried [bower_components/angular-bootstrap/ui-bootstrap] and [bower_components/angular_bootstrap]. It's late though so I'll have to pick it up again in the morning.

Edit 2: Followed vucalur's suggestion of adding angular-ui-bootstrap. This added a template folder under bower_components/angular-ui-bootstrap

Made this change: [ui-bootstrap] -> ['ui-bootstrap']. No page is displayed and error from Firebug is:

[$injector:modulerr] Failed to instantiate module ui-bootstrap due to: [$injector:nomod] Module 'ui-bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Edit 3: Refactored by rerunning yo and bower (with bower tried adding --save switch). Same result. It's like there is a missing classpath-like-thing that's not letting me reference dependencies in bower_components.

Answer 1

Take a look at this commit. (In case we do some rebasing and the link is no longer valid: https://github.com/vucalur/django-wibses, "feat(token-dropdown) ..." commit.)

• The project uses yeoman.
• It's CoffeeScript & Python on the backend, but I hope you'll get sth of it.
• Items are obtained from the server - JSONP and $http promise api come to play, but probably you won't need that if you have the items on the client side.
• Also note that you won't need to use bootstrap3 branch of angular-ui-bootstrap.
• Dependency is "angular-ui-bootstrap": "~0.9.0", not angular-boostrap. At least that's working for me.

Answer 2

Try ui.bootstrap instead of ui-bootstrap: you want a period, not a dash.