Jquery datepicker button is not working well

Question

I am using datepicker for my view. I also use angularjs. The problem is that when i use ok button it doesnt not change ng-model state. it still shows ng-empty. I use this value to calculate for another field, you can ignore that. Just tell how can imake ok button active instead of onClose? I need to make sure the ng-model change when user select a month and year. My date picker:

 $(function () {
            $('.date-picker').datepicker({

                yearRange: "-5:+0",
                showButtonPanel: true,
                dateFormat: 'MM yy',
                changeMonth: true,
                changeYear: true,
                closeText: 'OK',
                beforeShow: function () {
                    $(this).datepicker('widget').addClass('hide-calendar');
                    if ((selDate = $(this).val()).length > 0) {
                        iYear = selDate.substring(selDate.length - 4, selDate.length);
                        iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
                        $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));

                        $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
                    }
                },
                onClose: function (dateText, inst) {
                    $(this).datepicker('widget').removeClass('hide-calendar');
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));

                    var monthNames = ["January", "February", "March", "April", "May", "June",
                            "July", "August", "September", "October", "November", "December"
                    ];

                    var mN = $("#monthNo").val();

                    if (mN == '') {
                        return;

                    }

                    var tm = parseInt(month) + parseInt(mN-1)
                    if (tm > 11) {
                        tm = tm - 12;
                        year =parseInt(year) + 1;
                    }

                    $("#to").val(monthNames[parseInt(tm)] + " " + year);
                }


            }).click(function () {
               $('.ui-datepicker-calendar').hide();
            }).attr("readonly", true);
        });

Answer 1

$scope.$apply() is redundant. try $scope.$digest(). but remember jquery plugins always have lots of problems in angular/ try to use angular plugins/ it save you a lot of time in the future