Angular не обновляется после очистки массива

Question

У меня есть следующий HTML-код, где первая строка показывает:

<p>{{cal.eventSources}}</p>
<div ui-calendar ng-model="cal.eventSources"></div>

В моем JS у меня есть:

    $scope.$apply(setupCalendarEvents());

    function setupCalendarEvents(){

      self.eventSources = []; 

      angular.forEach(bookingMap, function(value, key) {
        self.eventSources.push(bookingMap[key]);
      });

    }

Проблема: почему первая HTML-строка обновляется, но события не попадают в календарь?

Больше информации

Если я удалю self.eventSources = []; После этого события появляются в календаре, но каждый раз, когда я добавляю событие, все предыдущие события дублируются.

Если я удалю $scope.$apply() тогда ничего не обновляется.

Я использую ui.calendar

Answer 1

Таким образом, получается, что следующая строка кода разрывает связь между календарем и моделью, потому что она создает новый массив:

self.eventSources = []; 

Вместо этого я заменил строку на:

self.eventSources.length = 0;

И у меня все работает как шарм.