ng-change function in angularjs custom directive u

This function works fine but when user enter first digit to text field it pass to the controller as a empty value and after second input it passes first input to the controller. I want to take value to controller on first input with correct value instead of empty value.

I have created custom directive for number validation

    app.directive('faxFormat', ['$filter', function($filter) {
       function link(scope, element, attributes) {

              // scope.inputValue is the value of input element used in template
              scope.inputValue = scope.phonenumberModel;

              scope.$watch('inputValue', function(value, oldValue) {
                     value = String(value);
                     var number = value.replace(/[^0-9]+/g, '');
                    // scope.phonenumberModel = number;
                     scope.inputValue = $filter('phonenumber')(number);
                     scope.phonenumberModel = scope.inputValue;

              });
              scope.$watch('phonenumberModel', function(value, oldValue) {

                  scope.inputValue = scope.phonenumberModel;

              });
//              element.bind('click', function(){
//                    scope.method();
//                    });
              scope.phoneFocused = function(){
                  scope.method();
              }

       }

       return {
              link: link,
              //restrict: 'A',
              //require: 'ngModel'
              restrict: 'E',
              scope: {
                     method: '&',
                     phonenumberPlaceholder: '=placeholder',
                     phonenumberModel: '=model',
                     myid: '=myid'
              },

              template: '<input ng-model="inputValue" type="tel" id="{{myid}}" class="phonenumber {{cls}}" ng-trim="false" placeholder="{{phonenumberPlaceholder}}" title="Phonenumber (Format:999-999-9999 or 1-999-999-9999)" ng-change="phoneFocused()">'
       };
}]);

Here is my controller

 $scope.removePhoneErrorHighlight   = function() {
                                        var fax =$scope.phoneData.phoneNumber;
                                        console.log(fax);
}

Here is my html code

 <fax-format class="faxFormat" myid="'accountPhone'" placeholder="'555-555-5555'" model="phoneData.phoneNumber"  method="removePhoneErrorHighlight()" data-ng-focus="removePhoneErrorHighlight()"></fax-format>

Try this approach

 link: function (scope, element, attrs, ngModelCtrl) {

              // on change of modal 
               element.on("change", function (e) {
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(element.val());
                    });
                });
            }

setting the updated value to the scope if the DOM changes.

for the controller instance, include require: 'ngModel' in your directive.

if element.on("change", ... (this syntax am not sure) if it is not working pls let me know.