javascript - Two way Binding Not working Instantly in AngularJS While Using Custom Directives -

plunkr

i have simple auto-complete dropdown. works fine when use controller.

i want make reusable,so made custom directive isolated scope.

but problem when type on search text box, not call controller function assigned ng-change instantly. when start typing once again, calls function. again takes value typed before not current model value.

i new custom directives... don't know how update model instantly , pass directive scope controller scope.

another think i can't able pass function parameter html controller function.

i think have use $apply or $digest somewhere.. but , how should use ?

autofillapp.directive('autofilldropdown', function($rootscope) {      return {          restrict: 'a',         templateurl: "dropdowntemplate.html",         replace: true,         scope: {             'items': '=autofillitems',             'selected': '=autofillselected',             'change': '&autofillchange',             'focused': '=autofillfocus',             'onselect': '&autofillonselect'         },         link: function(scope, element, attr) {             //console.log(scope.$$watchers);             //console.log(element);             //console.log(attr);             return         },         compile: function(element, attributes) {              var linkfunction = function($scope, element, attributes) {                 $scope.$apply();             }             return linkfunction;         }      }; }) 

here plunkr : plunkr

hey checked out approach , fixed problem.

your "change" function gets called "ng-change" of input field. that's okay right. ng-model not updated @ moment. therefore provide parameter value of input.

ng-change="change({searchtext:selected})" 

you need provide json object right property name. in case route out of isolated scope need call way (with same property name "searchtext"):

change="searchcurrencyonsearchtextchange(searchtext)" 

so final "change" function should this:

$scope.searchcurrencyonsearchtextchange = function (searchtext) {     if (searchtext === null || searchtext === '' ||searchtext ===undefined) {         $scope.isfocused = false;     }     else {         $scope.isfocused = true;         $scope.searchcurrencies = $scope.getfiltereddata(searchtext);     } }; 

i removed of css hide , show approaches. if use ng-show , jquery display/hide things, blow mind. try stick one.

also changed directive "attribute" "element" directive ;d

https://plnkr.co/edit/8snvflgofecjelw58wb6?p=preview