title: AngularJS UI-calendar holding reference to old events
body: <p>I am using FullCalendar (angular-ui-calendar) in an AngularJS application. I am passing events using an EventSources array: <code>$scope.eventSources = [$scope.events];</code> with <code>$scope.events</code> being generated and updated by the controller. My trouble is whenever I update <code>$scope.events</code>, FullCalendar seems to hold on to references to the old events.</p>
  
  <p>in index.html:</p>
  
  <pre><code>&lt;div ui-calendar="uiConfig" ng-model="eventSources" calendar="myCalendar"&gt;
  </code></pre>
  
  <p>My updateEvents function looks like this:</p>
  
  <pre><code>public updateEvents(newEvents) {
      // remove old events
      $scope.events.splice(0, $scope.events.length);
  
      // add new events using push
      for (var i = 0; i &lt; newEvents.length; i++) {
          $scope.events.push(newEvents[i]);
      }
  }
  </code></pre>
  
  <p>Unfortunately, the above function doesn't get rid of the old events unless I make an explicit call to refetch events from <code>EventSources</code>:</p>
  
  <pre><code>$scope.myCalendar.fullCalendar('refetchEvents');
  </code></pre>
  
  <p>I found a similar question (<a href="https://stackoverflow.com/questions/23006464/angularjs-ui-calendar-not-updating-events-on-calendar">AngularJS UI-calendar not updating events on Calendar</a>), and Studio4Development's answer seems the most relevant. However, I think I am maintaining the same array instance by using push and splice.</p>