AngularJS UI-Calendar events not updated for the ajax/Rest calls

[sunilactivity]

I am using the angular calendar-ui to build a web based calendar application. I am getting the events through a rest call and I am binding those data to the $scope.events to display it in the calendar.

The events are displayed in the calendar correctly for the first time. But, if I navigate to the next month and then come back to the current month, the events fetched through the rest are missing.

What surprises me is that only the data that has been fetched through the rest goes missing when I navigate and come back.

this is the sample code

$scope.events.push({title: 'Before Rest Call',start: new Date(y, m, 1)});

$http.get("getSchdTrngInfo").success(function(response) {

//hardcoded the data instead of reading from the response for simplicity sake.
$scope.events.push({title: 'In Rest Call',start: new Date(y, m, 2)});               

        })
        .error(function(data, status) {
            $scope.events.push({title: 'In Rest Call Failed',start: new Date(y, m, 2)});
        });

$scope.events.push({title: 'After Rest Call',start: new Date(y, m, 3)});`

This is what I get when I load the page,

And then I navigate to the april month and then return back to March, the data inside the rest call goes missing.

I have checked the $scope.events and I see that all the three events are present.

I have no clue why only the data in the rest call is missing.

[Levet]

It's not limited to the rest call, in my experience. If I add any new item to the events array after the calendar initializes it disappears on month change. My thinking is that somewhere in the angular module, events is being set to a static variable on initialization. So new items get truncated since the fallback list is static after initializing.

[martin-langhoff]

This is standard FullCalendar behavior. Look at FC docs around event properties, look for "sticky".