Using typeahead and ajax in a AngularJS app

angularjs, twitter-bootstrap

Solution

You need to actually return a promise from your `brands` function. Try this:

$scope.brands = function(brandName){
       return $http.post('/brands/getbrandsviewmodel', { query : brandName})
                     .then(function(response){
                        return limitToFilter(response.data, 15);
                      });
    };

Problem

I am having issues using Bootstrap-UI's typeahead control with dynamic data (data fetched from ajax call). The response in my service looks a bit like this `[{id:1, text:'somebrand'},{id:2, text:'something'}]` The HTML looks like this: ``` <input type="text" ng-model="result" min-length="2" typeahead="brand.id as brand.text for brand in brands($viewValue)" style="display:block"> ``` And in my controller I retrieve the content like this: ``` $scope.brands = function(brandName){ $http.post('/brands/getbrandsviewmodel', { query : brandName}).then(function(response){ return limitToFilter(response.data, 15); }); }; ``` The issue I run into is an error in Bootstrap-UI like this: ``` Cannot read property 'length' of undefined at http://localhost:3000/assets/ui-bootstrap-tpls-0.4.0.js?body=1:2749:24 ``` When I debug into the Bootstrap-UI code I see that the error occures here, and that matches is undefined: ``` //it might happen that several async queries were in progress if a user were typing fast //but we are interested only in responses that correspond to the current view value if (inputValue === modelCtrl.$viewValue) { if (matches.length > 0) {.... ``` My initial reaction is that Bootstrap-UI's typeahead isn't aware when the data is retrieved, but I don't know why, since I am using promises?

Original source