Hi everybody,

We have dateTimePicker directive. It has the following definition:(I added dateChange method today to it)

 function dateTimePicker($log, $timeout, DateFactory, dateService, resourceFactory) {
        $log = $log.getInstance("dateTimePicker");

        return {
            require: "ngModel",
            restrict: "E",
            replace: true,
            templateUrl: "app/templates/smDateTimePicker",

            scope: {
                ngModel: "=",
                form: "=",
                name: "@",
                placeholder: "@",
                defaultBod: "@",
                defaultEod: "@",
                showBod: "=?",
                showEod: "=?",
                showNow: "=?",
                compareDate: "@?",
                pickTime: "=?",
                isDateRange: "=?",
                onlyFutureDates: "=?",
                onlyPastDates: "=?",
                isEndDate: "=?",
                noDirtyCheck: "=?",
                isRequired: "=?",
                dateChange: "&?",
                width: "@?",
                timeOnly: "<?"
            },
          
            controller: function ($scope) {...

Also, it has link function with the following in it:

  link: function (scope, element, attrs, ngModelCtrl) {
...

scope.datetimepicker.on("dp.change", function () {
                    $log.debug("dp.change...");
....

$log.debug("Calling scope.dateChange method");
                    scope.dateChange();
                });

By ... I indicate there is more code in between.

Now, this directive is used in another directive called smContact. Here is how it's defined in the smContact template:

 <data-sm:date-time-picker name="birthDate"
                                                      ng-model="currentData.birthDate"
                                                      form="contactInfo"
                                                      data-date-change="birthDateChange"
                                                      data-only-past-dates="true" />

And in the smContact directive I have:

function smContact($log, resourceFactory) {
        $log = $log.getInstance("smContact");

        return {
            restrict: "E",
            templateUrl: "app/templates/smContactTemplate",
            scope: {
                currentData: "=",
                //isNew: "=",
                contactLabel: "@?",
                pickerToolTip: "@?",
                pickerTitle: "@?",
                validationRequired: "=?",
                showChooseContact: "=",
                hideCompany: "=?",
                hideBirthDate: "=?",
                hideUploadImage: "=?",
                writeMode: "=",
                form: "="
            },

            /**
             * Controller
             * @param {Object} $scope current scope
             */
            controller: ["$scope","$element", function ($scope, $element) {
                $log.debug("smContact directive controller");
...

 /**
                 * Watch for calculating how old a person is.
                 * @returns {} 
                 */
                $scope.$watch("currentData.birthDate", function (newValue, oldValue) {
                    $log.debug("$watch currentData.birthDate: newValue = " + newValue + " oldValue = " + oldValue);
                    if (newValue) {                        
                        $scope.currentData.age = moment().diff(newValue, "years");                       
                    }
                    
                });

                $scope.birthDateChange = function () {
                    $log.debug("Birthday Changed...");
                    $scope.currentData.age = moment().diff($scope.currentData.birthDate, "years");
                }

So, my idea was to get rid of the watch and use the method instead.

However, this method never fires that's why I uncommented the watch again (that gives the deprecation warning when I try to change the date from the calendar).

Do you see what I may be missing here?

Thanks in advance.