Невозможно обновить модель при изменении календарной даты

У меня возникла проблема с всплывающим окном выбора даты начальной загрузки angular ui (https://angular-ui.github.io/bootstrap/), где я не могу обновить свою модель.

У меня есть 2 разных календаря - один с всплывающим окном и один без (uib-datepicker-popup и uib-datepicker) внутри одного из моих угловых компонентов.

Это мой код:

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

Календарь слева (uib-datepicker) работает, как только я выбираю дату, он запускает changeCalendarDate() и печатает выбранную дату (console.log(self.calendar_date);)

Теперь я пытаюсь изменить календарь, как мне хотелось бы, с всплывающим окном ( uib-datepicker-popup ), которое вызывает changeCalendarDate2(), но когда я печатаю значение (console.log(self.calendar_date2);) оно не определено.

Я уверен, что мне нужно получить это значение по-другому, но я не знаю, как это сделать.

Кто-нибудь может помочь?

Спасибо :)