Extending Scope function to Directive in Angular 1

Question

I am trying to extend the angular-ui.github.io/bootstrap/ datepicker and it seems not to work.

angular.module('myApp',
[
    'ui.bootstrap'
])
.config(function($provide) {
    $provide.decorator('datepickerDirective', function ($delegate) {
        var directive = $delegate[0],
            link = directive.link;
        //works on 1.2
        /*
        angular.extend(directive.scope, {'monthChanged': '&'});
        */
        // Not working in Angular 1.4 too.
        /*directive.$$isolateBindings['monthChanged'] = {
         attrName: 'monthChanged',
         mode: '&',
         optional: true
         };*/
        // Not working in Angular 1.4 too.
        directive.bindToController = {
            'monthChanged': '&'
        };
        directive.compile = function () {
            return function (scope, element, attrs, ctrl) {
                link.apply(this, arguments);

                scope.$watch(function () {
                    return ctrl[0].activeDate.getTime();
                }, function (newVal, oldVal) {
                    if (scope.datepickerMode == 'day') {
                        oldVal = moment(oldVal).format('MM-YYYY');
                        newVal = moment(newVal).format('MM-YYYY');

                        if (oldVal !== newVal) {
                            var arr = newVal.split('-');
                            scope.monthChanged({'$month': arr[0], '$year': arr[1]});
                        }
                    }
                });
            };
        };
        return $delegate;
    })
})
.controller('MyCtrl', ['$rootScope', '$scope',
  function ($rootScope, $scope){
      $scope.changeMonth = function(month, year) {
            console.log(month, year);
            // set your date here if you need to
            // in my case, i needed to request some results via ajax
        };
    }]
);

I keep getting this error "TypeError: scope.monthChanged is not a function" I have adapted the code from Angular - ui-bootstrap - datepicker - Is there a way of detecting when the month has changed?

HTML is:

 <input id="deadlineField" name="deadlineField" type="text" class="form-control"
                           ng-model="newHw.deadline"
                           datepicker-popup="dd MMM yyyy" ng-disabled="viewOnly"
                           is-open="status.calDeadlineOpened" ng-focus="status.calDeadlineOpened=true"
                           show-weeks="false"
                           month-changed="changeMonth($month, $year)"
                            />

Try this plunker: http://plnkr.co/edit/sXuAkUz0l9XdtdUb457V?p=preview If you inspect the code, when I change the inline calendar to the next month, there is this error code: TypeError: scope.monthChanged is not a function –