Angular UI Bootstrap Typeahead does nothing

Question

Angular JS - v1.2.0-rc.3 Angular Bootstrap - 0.12.0

Controller:

app.controller('controlsController', ['$scope', '$http', function($scope, $http) {

    $scope.selected = undefined;

    $scope.getLocation = function(val) {
        return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
            params: {
                address: val,
                sensor: false
            }
        }).success(function(response){
            return response.data.results.map(function(item){
                return item.formatted_address;
            });
        });
    };
}]);

Jade:

input(type='text'
        ng-model='asyncSelected'
        placeholder='find...'
        typeahead='address for address in getLocation($viewValue)'
        typeahead-loading='loadingLocations'
        class='form-control')

Result:

Nothing

I have tried putting a button that calls getLocation in place of the input and it calls the function OK. Any ideas?

Hi Ian have you added dependency on the ui.bootstrap to your app ? — sylwester
yes please see here for working demo jsbin.com/suveba/2/edit — sylwester
Oh yes I have all those references already. I thought you meant native bootstrap js. — Ian Warburton

Ian Warburton Ian Warburton · Accepted Answer · 2014-11-19T23:17:02

You don't need ui-bootstrap-tpls.min.js and ui-bootstrap.min.js. Either one or the other.

Remember to add the dependency to the app's module.

    var app = angular.module('myApp', ['ui.bootstrap']);

Angular UI Bootstrap Typeahead does nothing

1 Answers