AngularJS typeahead otions not up to date

Question

I'm writing a directive wrapper around a typeahead input. This directive listens for changes on a link and get's new data + options for the typeahead.

I can simply simulate this behaviour with a $timeout and demonstrated it in this plnkr.co.

JS

app.controller('sample', function($scope, $timeout) {

  $scope.options = ['1800', '1900', '2100'];

  // Simulate some latency
  $timeout(function () {

    $scope.options.push('1850');

  }, 4000);

});

HTML

<div>
    <input type="text" ng-model="optionValue" typeahead="opt for opt in options | filter:$viewValue">
</div>

If you start typing '18' in the input field it shows 1800 as expected. But when 1850 get's added after an amount of time, the selectable options from typeahead are not being updated.

-- FYI my real live directive looks like this --

$scope.$watch($interpolate(url), function (newUrl) {
   $http.get(newUrl).then(function (response) {
     $scope.options = response;
   });
});

I tried to use typeahead="opt for opt in getData()" but this doesn't work because the interpolated value is not yet up to date. It's always one value behind.

Answer 1

If someone interested in the solution, here is how I solved it at the moment. I'm not happy with the end result, please provide me some feedback :-).

Plunkr

Check out updated-bootstrap.js, I had to add the following in order to make it work:

A custom attribute that'll be use for the $watchCollection

var customOptions = attrs.typeaheadCustomOptions || '';

In the function where it gets the matches I've added a watch if customOptions is provided:

if (customOptions) {
     originalScope.$watchCollection(customOptions, function (matches) {
          resetMatches();
          updateMatches(matches);
     });
}

And that was basically it :-), the updateMatches is just an abstraction of existing code. It's not being used by me and the manual update.

var updateMatches = function(matches) {
       for (var i = 0; i < matches.length; i++) {
           locals[parserResult.itemName] = matches[i];
           scope.matches.push({
                      id: getMatchId(i),
                      label: parserResult.viewMapper(scope, locals),
                      model: matches[i]
           });
       }

       scope.query = modelCtrl.$viewValue;
 };

Opened issue on github

Answer 2

Seems like an issue to post on AngularUI Bootstrap website. Matches are getting selected on every keystroke but they don't get updated if you change the underlying data between keystrokes. I don't see any work-around for this, except maybe triggering the appropriate key event handler on the input manually (when you change the collection).