title: AngularUI Calendar event source that calls a function on every view switch
body: <p>To demonstrate the problem, I'll explain what I'm trying to achieve. I'm creating a booking system using AngularUI Calendar, and the problem is that the calendar's performance starts to drop very quickly and noticeably when the number of the events increase (100+ events, and the calendar will take minutes to bind data). Due to that I'm trying to fetch data from back-end when view changes by sending AJAX request every time the user change the view (week, month, day, prev, next... etc.) This is when I start to have problems.</p>
  
  <p>As it's been suggested on <a href="http://angular-ui.github.io/ui-calendar/">AngularUI Calendar</a> website that I can use this function: <code>$scope.eventsF = function (start, end, timezone, callback) {...}</code> and add it to the <code>$scope.eventSources</code> and it will be called on every view switch. I added the <code>$scope.eventsF</code> to my <code>$scope.eventSources</code> but it's never updated.</p>
  
  <p>Here is the sample (fetching all data, and it's working):</p>
  
  <pre><code>$scope.mainEvents = []; //To initiate the event source
  Event.getEvents().then(function (events) { // Event is a factory
    if (events) { //Checking if I have events
      // If I try: $scope.mainEvents = events; the $scope.eventSources won't update
      angular.forEach(events, function(value) {
        this.push(value);
      }, $scope.mainEvents);
    } else {
      // Tell the user no events to render...
    }
  }, function (error) {
    console.log(error);
  });
  
  $scope.eventSources = [$scope.mainEvents, $scope.draftEvents];
  </code></pre>
  
  <p>Now I changed <code>Event.getEvents()</code> to take two parameters as start date and end date of the view, send them to the back-end, and retrieve data as json again (worked fine, I consoled that out).</p>
  
  <p>Here is the code (I tried two ways): Events are rendering, but <code>$scope.eventSources</code> is not updating in both of them.</p>
  
  <p>First:</p>
  
  <pre><code>$scope.mainEvents = function (start, end, timezone, callback) {
    var s = start.format('YYYY-MM-DD'),
        e = end.format('YYYY-MM-DD');
    Event.getEvents(s, e).then(function (events) {
      $scope.mainEvents = []; //even tried $scope.eventSources.mainEvents
      if (events) {
        angular.forEach(events, function (value) {
          this.push(value);
        }, $scope.mainEvents); //event tried $scope.eventSources.mainEvents
        callback($scope.mainEvents);
      }
    }, function (error) {
      console.log(error);
    });
  };
  
  $scope.eventSources = [$scope.mainEvents, $scope.draftEvents];
  </code></pre>
  
  <p>Second: </p>
  
  <pre><code>$scope.eventsF = function (start, end, timezone, callback) {
    var s = start.format('YYYY-MM-DD'),
        e = end.format('YYYY-MM-DD');
    Event.getEvents(s, e).then(function (events) {
      $scope.mainEvents = [];
      if (events) {
        angular.forEach(events, function (value) {
          this.push(value);
        }, $scope.mainEvents);
        callback($scope.mainEvents);
      }
    }, function (error) {
      console.log(error);
    });
  };
  
  $scope.eventSources = [$scope.mainEvents, $scope.draftEvents, $scope.eventsF];
  </code></pre>
  
  <p>I hope this is clear enough.</p>