AngularJS datepicker custom directive formatter not displaying date - angularjs

Question

I have two custom datepicker directives. One is called startDatePicker directive and the second is endDatePicker. I'm passing model from one to another which is fine, however when I pass date as string it does not display the date. I know it shouldn't because datepicker expects date object and it cannot convert it to date object automatically. Because my backend server returns dates as strings I need to convert to date objects. For that I use model.$formatter in my directive to convert string to date object and then send it to the view so the date can be selected and displayed. The date is getting selected, but it's not getting displayed..
To simulate the issue I have defined two variables in my controller. These two will be used for datepicker models as well. The first variable gets selected and displayed in the datepicker, but second only gets selected, but not displayed. What I'm doing wrong?
$scope.startDate = moment.utc("2016/12/25 00:00:00")._d;
$scope.endDate = "2016/12/25 00:00:00";
I have setup plunker to show the issue http://plnkr.co/edit/trEkwuO06VMJ1HdCkl5w?p=preview
Complete directive below
angular.module('ui.bootstrap.demo').directive('endDatepicker', function() {
return {
restrict: 'A',
scope: {
ngModel: "=",
minStartDate: "=",
},
require: 'ngModel',
replace: true,
templateUrl: 'datepicker-template.html',
link: function(scope, element, attrs, ngModel) {
ngModel.$formatters.push(function getJsonDate(date) {
if (!date) return null;
console.log("Unformatted date " + date)
var newDate = moment.utc(date)._d;
console.log("Formatter fired " + newDate)
return newDate
});
scope.popupOpen = false;
scope.openPopup = function($event) {
$event.preventDefault();
$event.stopPropagation();
scope.popupOpen = true;
};
console.log(scope.endDate);
scope.$watch('minStartDate', function(newValue,oldValue){
if (newValue) {
console.log(newValue)
scope.dateOptions.minDate = newValue;
}
})
scope.dateOptions = {
startingDay: 1,
minDate: moment.utc()._d
}
scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
scope.opened = true;
};
}
};
});

Answer 1

This can be a confusing issue.
Right there will be two ngModel controllers associated with the endDatepicker directive.
One for ng-model here:
<div end-datepicker ng-model="endDate" min-start-date="startDate"></div>
And one for ng-model in the template:
<input type="text" class="form-control" ... ng-model="ngModel" ...
Both controllers will work with the same model, but you need to add the formatter to the correct one.
When you require the controller in your directive you will get the ngModel controller for the first one, but you need the controller for the ngModel on the input where the formatted value is to be shown.
Instead of requiring the controller the following should work:
link: function(scope, element, attrs, ngModel) {
var inputModelController = element.find('input').controller('ngModel');
inputModelController.$formatters.push(function getJsonDate(date) {
// Code
});