angular-ui bootstrap typeahead with promise and orderBy

Question

I am trying to use the typeahead directive with Angular-ui bootstrap as described here: http://angular-ui.github.io/bootstrap/#/typeahead

My end goal is to make an $http call to return an array of objects. I have this working well, however I am not able to get the orderBy or limitTo filters to work.

I have reproduced a similar result using promises in the following: http://plnkr.co/edit/AFPjWArALkZU5ImzgobG?p=preview

Both results should be sorted by state name descending, but only the one populated by an object is actually doing so.

My question is whether I am missing something or if this is a known limitation? Are there any workarounds? I know I could do the sorting in the controller using "then" after the promise, but that seems a bit clunky.

Answer 1

The way you've written it was making a filter acting on the promise itself, rather on the result of the promise. The proper approach in this case is to do the actual filtering in JavaScript, as shown below:

$scope.getStates = function(val) {
    return $timeout(function(){
      return orderByFilter(filterFilter($scope.statesWithFlags, val), 'name', true);
    }, 500)
  };

As a side note: the $timeout service API is already promise-based so no need to use $q explicitly.

Here is a plunk: http://plnkr.co/edit/w5rhFKgYKNOQ6FFVNoUY?p=preview