7

Consider the following in the body of my html file:

<html>
...
<body>
...
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<input type="text" ng-model="selected" typeahead="name as entry.name for entry in entries | filter:{name: $viewValue} | limitTo:8" 
                 typeahead-on-select='onSelect($item, $model, $label)'
                 class="form-control">

{{selection_made}}
</div>
<body>
</html>

where entries are populated somewhere else. And then this in the controller:

angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {
        ...
        $scope.onSelect = function ($item, $model, $label) {
                $scope.$selection_made = $item;
        };
...
});

I have the autocomplete working, but the selection callback doesn't seem to work well. I was expecting {{selection_made}} to display whatever is selected, but instead the literal text {{selection_made}} gets rendered. Why? What am I missing?

Note: I used this answer for reference.

Community
  • 1
  • 1
Amelio Vazquez-Reina
  • 91,494
  • 132
  • 359
  • 564
  • Thanks @Satpal, yes I tried that without luck (I get the exact same thing) – Amelio Vazquez-Reina Dec 08 '14 at 19:36
  • If you put a debugger above the $scope.selection_made = $item; line, and you inspect the item, model, and label. Do they contain the information that you expect? – KreepN Dec 08 '14 at 19:40
  • @KreepN Yes, I just checked and it does. Except model, which seems to be "undefined". – Amelio Vazquez-Reina Dec 08 '14 at 19:41
  • Follow-Up: If you add $scope.$apply(); after your assignment line, do you still see the string "{{selection_made}}"? (Make sure it's lower-case, as I pasted incorrectly a second ago). – KreepN Dec 08 '14 at 19:44
  • 3
    Thanks a lot @KreepN .... You pointed me in the right direction with the debugger. The problem was that I was doing `$scope.$selection_made = $item` (I used [this answer](http://stackoverflow.com/a/17994624/283296)). Changing things to `$scope.selection_made = $item` fixed everything. Thanks – Amelio Vazquez-Reina Dec 08 '14 at 20:00
  • Lol, now that you point that out, it's obvious. I totally looked past that. Silly me. Glad you got it. – KreepN Dec 08 '14 at 20:01
  • @KreepN I presume that the answer I linked to also has it wrong then? – Amelio Vazquez-Reina Dec 08 '14 at 20:02
  • 2
    Angular UI actually expects that syntax: $scope.$[variablename]. In your case, if you changed {{selection_made}} to {{$selection_made}}, and left your onSelect code the way you have it in your question, it would have worked. – KreepN Dec 08 '14 at 21:16

0 Answers0