Change the ngmodel value in Angularjsdatepicker directive - angularjs

Question

I have tried to convert a bootstrap datepicker from eternicode to angularjs directive and allow to select week mode. The problem is the value {{var1}} from the view doesn't reflect to the custom value that i set on Directive
weekDatePicker directive:
var app = angular.module('angular.controls', [])
app.directive('weekDatePicker', ['$filter','$parse', function ($filter, $parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
console.log('start');
element.datepicker({
//minViewMode: 1,
//format: "MM-yyyy"
}).on('changeDate', function (e) {
scope.$apply(function () {
var date = e.date;// element.datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
startDate = $filter('date')(startDate, 'dd-MM-yyyy');
endDate = $filter('date')(endDate, 'dd-MM-yyyy');
dateText = startDate + ' - ' + endDate;
e.date = dateText;
//console.log(e.date);
ngModelCtrl.$setViewValue(dateText); //>> no change from view
console.log(ngModelCtrl);
});
});
}
};
}]);
You can see the whole code at jsFiddle
View: <input week-date-picker ng-model="var1" class="form-control" />
{{var1}} >> why it doesn't get the custom value from directive ?

Answer 1

I have forked you fiddle
var app = angular.module('angular.controls', [])
app.directive('weekDatePicker', ['$filter','$parse', function ($filter, $parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
console.log('start');
var ngModelParseFn = $parse(attrs.ngModel);
element.datepicker({
//minViewMode: 1,
//format: "MM-yyyy",
// language: "vi"
})
scope.$watch(function () {
return ngModelCtrl.$modelValue;
}, function (newValue) {
var date = element.data().datepicker.viewDate;
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
startDate = $filter('date')(startDate, 'dd-MM-yyyy');
endDate = $filter('date')(endDate, 'dd-MM-yyyy');
dateText = startDate + ' - ' + endDate;
ngModelParseFn.assign(scope, dateText);
});
}
};
}]);
Hope this is what you want.