Jquery datepicker selected date is not considered in ng-change - AngularJS

Question

Kindly help me to solve this issue. I am using jquery datepicker with AngularJS. I am trying to get the selected date and pass it with a function as parameter. For this I am using the following code.

Html:

<input type="text" "ng-model="gettingStartDate" ng-change="newTest(gettingStartDate)" />

Date Picker:

$( "#date1" ).datepicker();

AngularJS:

function getOrg($scope, $http) {

  $scope.newTest = function(start_date){
     alert(start_date); 
  };

}

Answer 1

Such complex UI components need to be wrapped into a directive to maintain a model data binding. For the jQuery datepicker, you can check this question, or google around "jquery datepicker directive".

Answer 2

<input type="text" id="date1" datepicker1 ng-model="gettingStartDate" />

var app = angular.module('reports', [])
.directive("datepicker1", function () {
    return {
        restrict: "A",
        link: function ($scope, $element, $attr, $controller) {
            $element.datepicker({
                changeMonth: false,
                showOtherMonths: true,
                numberOfMonths: 2,
                dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                onSelect: function (date) {
                    $scope.gettingStartDate = date;
                    $scope.$apply();
                    $scope.fromDateSend(date); // function call
                },
                onClose: function (selectedDate) {
                    $("#date2").datepicker("option", "minDate", selectedDate);
                }
            });
        }
    };
});

Answer 3

You should change the entire approach. Using jQueryUI datepicker directive:

angular
    .module('App',['ui.date'])
    .directive('customDatepicker',function($compile){
        return {
            replace:true,
            templateUrl:'custom-datepicker.html',
            scope: {
                ngModel: '=',
                dateOptions: '='
            },
            link: function($scope, $element, $attrs, $controller){
                var $button = $element.find('button');
                var $input = $element.find('input');
                $button.on('click',function(){
                    if($input.is(':focus')){
                        $input.trigger('blur');
                    } else {
                        $input.trigger('focus');
                    }
                });
            }    
        };
    })

See demo