jsonp typeahead not population my uib-typeahead form element

Question

I've been trying to populate a uib-typeahead from the ui-bootstrap modules (https://angular-ui.github.io/bootstrap/) using a jsonp callback function in a factory method.

Here is my factory function

autoCompleteCity: function(city){
            return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK&filter=US&q="+city);
}

Here is my controller

.controller('searchCtrl', function($scope, $rootScope, $http, owm, limitToFilter) {
    $scope.cities = function(cityName) {
        if(cityName.length > 2){
            owm.autoCompleteCity(cityName)
                .success(function(response){
                   return limitToFilter(response.data, 10);
                });
         }
     }

And here is my HTML

      <input class="form-control" type="text" placeholder="City your seraching for" ng-model="result" uib-typeahead="suggestion for suggestion in cities($viewValue)" >

As you can imagine the jsonp callback works fine and returns a nicely formatted array. The problem is that the typeahead form element doesn't work now. It can't seem to loop through the data (suggestion for suggestion in cities($viewValue)).

Any thoughts. It appears to a scope issue because if I hard code a array of names outside of my success() function it works.

Help, thoughts?

Answer 1

The uib-typeahead is expecting a resolved promise as result.

Take a look at this post : angular.js ui + bootstrap typeahead + asynchronous call

Instead of having the IF condition to check the name length. It's easier to use typeahead-min-length to call cities only when $viewValue > 2 like this :

<input class="form-control" type="text" placeholder="City your seraching for" ng-model="result" typeahead-min-length="3" uib-typeahead="suggestion for suggestion in cities($viewValue)" >

Your controller :

 .controller('searchCtrl', function($scope, $rootScope, $http, owm, limitToFilter) {
    $scope.cities = function(cityName) {
        return owm.autoCompleteCity(cityName)
            .then(function(response){
               return limitToFilter(response.data, 10);
            });
    }
}