Update input ng-model after setting the value of Jquery

Question

I had datepicker using jquery. It works when the page is loaded because i set the default date in my controller. Picking a date is ok but the problem is when you get the value using angular js its not updated, always the default value. Anyone how to update the value when date is selected and set by jquery. Really appreciate your help and thanks in advance.

html

<input type="text" id="date1"  name="date1" ng-model="data.date1">
<input type="text" id="date2"  name="date2" ng-model="data.date2">
<button type="button" ng-click="get()">Test Value</button>

jquery

$('#date1').datepicker({
language: 'en',
autoClose:true,
dateFormat: 'd MM yyyy',
onSelect: function (fd, date, picker) {
}});

$('#date2').datepicker({
language: 'en',
autoClose:true,
dateFormat: 'd MM yyyy',
onSelect: function (fd, date, picker) {


}});

angular js

var app = angular.module('app', []);
app.controller('MainController', function($scope, $http){
 $scope.data = {};

 // default date
 $scope.data.date1  = new Date();
 $scope.data.date2  = moment(new Date()).add(1, 'days');

 $scope.get = function(){
    console.log($scope.data.date1);
    console.log($scope.data.date2);
 }});

Answer 1

If you are about to use datepicker more than one time, I suggest to create directive and just use it.

Directive

app.directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datepicker({
                    dateFormat:'dd/mm/yy',
                    onSelect:function (date) {
                        scope.$apply(function () {
                            ngModelCtrl.$setViewValue(date);
                        });
                    }
                });
            });
        }
    }
});

HTML

<input type="text" ng-model="date1" datepicker />
<input type="text" ng-model="date2" datepicker />

For more detail, just check this Plunker