Unable to update model on calendar date change - angular-ui-bootstrap

Question

I am having an issue with the angular ui bootstrap datepicker popup (https://angular-ui.github.io/bootstrap/) where I cannot get my model to update.
I have in place 2 different calendars - one with the popup and one without (uib-datepicker-popup and uib-datepicker) inside one of my angular component.
This is my code:
function headerCtrl () {
const self = this;
self.$onInit = () => {
self.dateOptions = {
showWeeks: false,
formatYear: 'yyyy',
startingDay: 1
};
self.today = function() {
self.calendar_date2 = new Date();
};
self.today();
self.clear = function() {
self.calendar_date2 = null;
};
self.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
self.toggleMin = function() {
self.inlineOptions.minDate = self.inlineOptions.minDate ? null : new Date();
self.dateOptions.minDate = self.inlineOptions.minDate;
};
self.toggleMin();
self.open = function() {
self.popup.opened = true;
};
self.setDate = function(year, month, day) {
self.calendar_date2 = new Date(year, month, day);
};
self.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
self.format = self.formats[0];
self.altInputFormats = ['M!/d!/yyyy'];
self.popup = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
self.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < self.events.length; i++) {
var currentDay = new Date(self.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return self.events[i].status;
}
}
}
}
self.changeCalendarDate = () => {
console.log('changeCalendarDate');
console.log(self.calendar_date);
};
self.changeCalendarDate2 = () => {
console.log('changeCalendarDate2');
console.log(self.calendar_date2);
};
}}
export default {
bindings: {
duration: "<",
zoom: "<",
selection: "<",
selections: "<",
calendar_date: "<",
onDurationChange: "&",
onCalendarDateChange: "&",
onHeatmapSelectionChange: "&"
},
controller: headerCtrl,
template: `
<div class="pp-header-container">
<div uib-datepicker
ng-model="$ctrl.calendar_date"
datepicker-options="$ctrl.dateOptions"
class="heatmap-header pp-sch-header-item"
ng-change="$ctrl.changeCalendarDate()"></div>
<div class="pp-header-calendar">
<input type="text"
uib-datepicker-popup="{{$ctrl.format}}"
ng-model="$ctrl.calendar_date2"
is-open="$ctrl.popup.opened"
datepicker-options="$ctrl.dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="$ctrl.altInputFormats"
maxlength="10"
size="10"
ng-change="$ctrl.changeCalendarDate2()" />
<button type="button" class="btn btn-default" ng-click="$ctrl.open()"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>`
}
http://prnt.sc/esq9c9
The calendar on the left (uib-datepicker) works, as soon as I pick a date, it triggers changeCalendarDate() and it prints the selected date (console.log(self.calendar_date);)
Now what I am trying to do is change calendar as I would like the one with the popup ( uib-datepicker-popup ) which does trigger changeCalendarDate2() but when I print the value (console.log(self.calendar_date2);) it is undefined.
I am sure I need to grab that value differently but I don't know how.
Can anyone help?
Thanks :)

Answer 1

I have solved this problem :D
The problem was this
uib-datepicker-popup="{{$ctrl.format}}"
as soon as I have removed thee value assigned and left only
uib-datepicker-popup
it worked. I don't know why but I am happier now :)