AngularJS date input not showing initial value inside directives in Firefox

I have a date input that is bound to a model. If the input is inside a directive, then the date input doesn't have it's initial value set. Updating the input does update the model, it's just the initial value that isn't set. It works fine in Chrome, but not in Firefox.

Here is the relevant codepen

HTML:

<div ng-app="app" ng-controller="main">
 <input type=text ng-model="mainDateModel">
 <input type=date ng-model="mainDateModel">
 Main date model: {{mainDateModel}}
 <dir></dir>
</div>

JS:

angular.module('app', [])
angular.module('app').controller('main', function($scope) {
 $scope.mainDateModel = new Date();
})
angular.module('app').directive('dir', function() {
 return {
  template: '<input type=text ng-model="dirDateModel">' +
    '<input type=date ng-model="dirDateModel">' + 
    ' Dir date model: {{dirDateModel}}',
  controller: function($scope) {
    $scope.dirDateModel = new Date();
  }
 }
})

It should show 12/13/2018 where it says mm/dd/yyyy

Is there something I am doing wrong or is there an easy way to work around it? The text input is correctly initialized, just the date isn't.

Update: Here is the bug I filed in Bugzilla