Why ngModel.$render is not getting invoked?

Question

EDIT 1: Fixed a bug, but still not working.

element.val(ngModel.$viewValue || '');

should have been:

dateInput.val(ngModel.$viewValue || '');

EDIT 2: The problem seems to be due to the isolate scope. The injected ngModel's $render() method is not getting invoked when the scope is an isolate. If I make the scope non-isolate and set ng-model="selectedDate", then $render() is getting invoked as expected.

EDIT 3: Actually the problem is due to $parent.selectedDate. If I change it to selectedDate, the code seems to be working fine. However I want to ensure that selectedDate is not getting defined on the directive's scope, but it is inherited from its parent's scope. That's why I want to use $parent., but it is not working as expected.

---

I am writing a custom date picker that when the browser supports HTML5 date inputs, uses that, and otherwise uses jQuery UI's Date Picker. It is still work in progress and right now only the part to use native HTML 5 date inputs is being implemented.

The directive can be used like this:

<div mil-datepicker ng-model="$parent.selectedDate"></div>

However, when $scope.selectedDate has an initial value, it is not getting rendered by the directive. Also external changes to selectedDate` (e.g. by clicking on a button) are not being obserevd by the directive.

Any ideas what is possibly wrong with my code?

Here's a live version of the code: milDatePicker.

Here's the code for the directive:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.selectedDate = '2020-01-01';
  $scope.changeDate = function() {
    $scope.selectedDate = '2030-03-03';
  };
});

app.directive('milDatepicker', function () {
   var template =
      '<div class="mil-datepicker clearfix">' +
         '   <input type="date" class="form-control">' +
         '   <div class="btn-group">' +
         '      <button type="button" class="btn btn-default btn-back">' +
         '         <span class="glyphicon glyphicon-chevron-left"></span>' +
         '      </button>' +
         '      <button type="button" class="btn btn-default btn-reset">Today</button>' +
         '      <button type="button" class="btn btn-default btn-forward">' +
         '         <span class="glyphicon glyphicon-chevron-right"></span>' +
         '      </button>' +
         '   </div>' +
         '</div>';

   return {
      template: template,
      restrict: 'A',
      require: 'ngModel',
      scope: {},
      priority: 0,
      link: function (scope, element, attrs, ngModel) {
         var nativeDatePickerHandlers = {
            back: function () {
               var $input = element.find("input").first();
               if ($input.val() === '' || $input.val() === undefined) {
                  return;
               }

               scope.$apply(function () {
                  var currentDate = moment($input.val(), "YYYY-MM-DD"),
                     yesterday = currentDate.subtract('days', 1).format("YYYY-MM-DD");

                  $input.val(yesterday);
                  ngModel.$setViewValue(yesterday);
               });
            },
            forward: function () {
               var $input = element.find("input").first();
               if ($input.val() === '' || $input.val() === undefined) {
                  return;
               }

               scope.$apply(function () {
                  var currentDate = moment($input.val(), "YYYY-MM-DD"),
                     tomorrow = currentDate.add('days', 1).format("YYYY-MM-DD");

                  $input.val(tomorrow);
                  ngModel.$setViewValue(tomorrow);
               });
            },
            reset: function () {
               var $input = element.find("input").first();

               scope.$apply(function() {
                  var today = moment().format("YYYY-MM-DD");
                  $input.val(today);
                  ngModel.$setViewValue(today);
               });
            },
            change: function () {
               var $this = $(this);

               scope.$apply(function () {
                  ngModel.$setViewValue($this.val());
               });
            }
         };

         function initNativeDatePicker(element) {
            var dateInput = element.find("input").first();

            element.find('.btn-back').first().on("click", nativeDatePickerHandlers.back);
            element.find('.btn-reset').first().on("click", nativeDatePickerHandlers.reset);
            element.find('.btn-forward').first().on("click", nativeDatePickerHandlers.forward);

            dateInput.on("change", nativeDatePickerHandlers.change);

            ngModel.$render = function () {
               dateInput.val(ngModel.$viewValue || '');
            };
         }

         // on browsers that support the HTML 5 date picker just use that
         // and do not use the jQuery UI DatePicker
         if (Modernizr.inputtypes.date) {
            initNativeDatePicker(element);
         } else {

         }
      }
   };
});