Change
scope.$apply;
to
scope.$apply(function(){
scope.foo= ui.item.label;
});
Question
I am trying for the past 5 hours without success... Here is the code..
In View:
<input type="text" ng-model="foo" auto-complete/>Foo = {{foo}}
In controller:
myapp.directive('autoComplete', function(autoCompleteDataService) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.autocomplete({
source: autoCompleteDataService.getSource(), //from your service
select: function( event, ui ) {
scope.foo= ui.item.label;
scope.$apply;
},
change:function (event, ui) {
if (ui.item === null) {
scope.foo = null;
}
},
minLength: 2
});
}
};
});
myapp.factory('autoCompleteDataService', [function() {
return {
getSource: function() {
return ['apples', 'oranges', 'bananas'];
}
}
}]);
Here is the issue...
The selected item is getting into the input box, but foo variable next to input box is not updating.
Where is the mistake.
Please suggest...
Solution
Change
scope.$apply;
to
scope.$apply(function(){
scope.foo= ui.item.label;
});