Load data dynamically when I change the date - angularjs

Question

This is my calendar object
$scope.uiConfig = {
calendar: {
height: 450,
editable: false,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.onEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
dayClick: $scope.onDayClick,
viewRender: $scope.getData
}
};
and
$scope.getData = function(view, element){
$scope.intervalStartDate = new Date(view.start);
$scope.intervalEndDate = new Date(view.end);
$scope.managedEvents = Event.getFittingsForDateInterval({
intervalStartDate : convertDate($scope.intervalStartDate),
intervalEndDate : convertDate($scope.intervalEndDate)
});
$scope.managedEvents.$promise.then(function(data){
$scope.uiConfig.calendar.events = data;
});
}
if I remove
$scope.uiConfig.calendar.events = data;
no data is populating and if i include that it is refreshing and loading current month data
for the first time it is loading the data for January month, whenever I click on next month icon, it is calling for February month data and again calendar is resetting to present month (it is calling $scope.getData again)
data = [{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name}];
I want to get data for only current view instead of all at once.
any help would be appreciated.

Answer 1

Controller.js Code: .
$scope.getEvents = function(){
var obj = {};
$scope.events = [];
obj.startDate = new Date($scope.myView.intervalStart).getTime();
obj.endDate = new Date($scope.myView.intervalEnd).getTime();
if($scope.myView.name == "month"){
obj.endDate = obj.endDate - 19801000;
}
//Give a call to database from here, in which obj contains
// start and end of the view
var getEventsPromise = masterCalendarAPI.getEvents(obj);
getEventsPromise.then(function (response) {
if(response.statusCode == 200){
//Assign $scope.event the list object retrieved from database
}
},
function (error) {
console.log(error);
});
}
//Remember this method will be called on each view change with all details in 'view' object
$scope.renderView = function (view) {
$scope.myView = view;
$scope.getEvents();
}
$scope.uiConfig = {
calendar: {
height: 500,
editable: false,
header: {
left: 'prev,next title',
center: '',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
views: {
month: {
eventLimit:3
}
},
columnFormat:'dddd',
timezone: 'local',
timeFormat: 'hh:mm a',
titleFormat:'MMMM D, YYYY',
slotDuration:'00:30:00',
eventRender:$scope.eventRender,
eventClick: $scope.eventClicked,
dayClick: $scope.dayClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
viewRender: $scope.renderView
}
} ;
//event sources array
$scope.eventSources = [$scope.events];