datepicker value not binding to model in angular using custom directive

Question

i am using datepicker and want to bind its value i wrote custom directive for it but know why its not binding value .

HtmlTagsdatepicker

<div class="col-md-6">
                            <label for="datepicker" class="col-lg-5 form-label">Date Of Birth:</label>
                            <div class="col-lg-7">
                                <input type="text" class="form-control dateBirth"  ng-model="user.dob" id="datepicker" name="datepicker" datepicker="" value="" placeholder="Date Of Birth" required/>
                                <div class="error" ng-show="newUser_form.datepicker.$dirty && newUser_form.datepicker.$invalid">
                                    <small class="error errorFields" ng-show="newUser_form.datepicker.$error.required">
                                        Date is required.
                                    </small>

                                </div>
                            </div>
                        </div

>

datepickerDirective.js

app.directive('datepicker', function() {
    var linker = function(scope, element, attrs, ngModelCtrl) {
        element.datepicker().on('changeDate', function(value){
            var dateStrToSend = value.date.getFullYear() + '/' + (value.date.getMonth() + 1) +  '/' + value.date.getDate();
            ngModelCtrl.$setViewValue(dateStrToSend);
            $(".datepicker").hide();
        });
    }
    return {
        require: 'ngModel',
        restrict: 'A',
        link: linker
    }
});

Answer 1

I think you aren't in a digest cycle. Try $apply

element.datepicker().on('changeDate', function(value){
    var dateStrToSend = value.date.getFullYear() + '/' + (value.date.getMonth() + 1) +  '/' + value.date.getDate();
    scope.$apply(function () {
        ngModelCtrl.$setViewValue(dateStrToSend);
    });
    $(".datepicker").hide();
});