Updating model value in Angular Bootstrap UI typeahead

Question

I am using the Angular Bootstrap UI typeahead and trying to update the model value inside the typeahead. But the updated model value does not reflect the changes unless specifically applied.

<input ng-model="query" typeahead="option for option in getOptions($viewValue)">

app.controller('MainCtrl', function($scope) {
  $scope.query = '';
  $scope.getOptions = function(query){
    if(query == "foo"){
      $scope.query = "foobar";
      // uncommenting the next line works but also raises error
      // $scope.$apply()
      return []
    }
    return ["I have an idea", "I have new idea"];
  }
});

Plunker Code: http://plnkr.co/edit/pNxBMgeKYulLuk7DO0gB?p=preview

Kabb5 · Accepted Answer · 2014-09-16 19:44:24Z

1

You can accomplish this by watching the value of $scope.query.

In the $watch, newValue and oldValue represent the value of $scope.query after and before it is changed, respectively.

$scope.$watch("query", function(newValue, oldValue){
  if (newValue !== oldValue) {
    if (newValue === "foo") {
      $scope.query = "foobar";
    }
  }
});

http://plnkr.co/edit/Fsj8KWuSzr9VTMkKB9wO?p=preview

edited Sep 16, 2014 at 19:44

Kabb5

3,9003 gold badges35 silver badges57 bronze badges

answered Sep 20, 2013 at 20:34

Jonathan Palumbo

6,8711 gold badge31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pratyush Over a year ago

Thanks Jonathan, that works perfectly. I am still unable to understand why updating model inside getOptions() doesn't work, while $watch works?

Jonathan Palumbo Over a year ago

One thing I can note is that there is no $scope.apply() method. However there is a $scope.$apply() which also cause an error of $apply already in progress.

Pratyush Over a year ago

Yeah, I missed the $. I was trying to avoid the $apply() thing.

Jonathan Palumbo Over a year ago

I believe that it is changing the $scope.query to foobar successfully. However the typeahead is coming along and stomping all over that scope variable after is its changed in getOptions() Have a look here plnkr.co/edit/i2l0z5EIiUUujVhAlJig?p=preview, if you look in the console you will see getOptions fired, changing to foobar, value change: foo. Immediately after the changing to foobar message the value is changed back to foo. Most likely by the type ahead directive.

Collectives™ on Stack Overflow

Updating model value in Angular Bootstrap UI typeahead

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related