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); 
  };

}

Solution 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".

Solution 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);
                }
            });
        }
    };
});