Angular ui calendar, $scope.events remains as undefined - angularjs

Question

here's what my controllers looks like
var resource = Restangular.all('api/events/');
resource.getList().then(function(events){
$scope.events = events;
});
$scope.eventRender = function( event, element, view ) {
element.attr({'tooltip': event.title,
'tooltip-append-to-body': true});
$compile(element)($scope);
};
/* config object */
$scope.uiConfig = {
calendar:{
height: 700,
editable: true,
header: {
left: 'prev,next title',
//center: 'title',
right: 'month,agendaWeek,'
},
eventRender: $scope.eventRender
}
};
/* event sources array*/
$scope.eventSources = [$scope.events];
i think angular ui calendar directive is getting triggered first,
how can i make it to get data first and then trigger directive?

Answer 1

You can specify a function in eventSources which does the fetching like so, you have to call the callback function with an array of events.
var resource = Restangular.all('api/events/');
/* event sources array*/
$scope.eventSources = [fetchEvents];
function fetchEvents(start, end, timezone, callback) {
resource.getList()
.then(function(events) {
// do some event processing ?
callback(events);
});
}
Side note from my own experience with fullCalendar and Angular:
$scope.eventRender = function( event, element, view ) {
element.attr({'tooltip': event.title, 'tooltip-append-to-body': true});
$compile(element)($scope);
};
This is a really big bottleneck on performance, and you probably want to avoid this. It will create a dom node+logic for EVERY event you render, which can be quite a lot. The best thing to do is to either make your own tooltip directive which reuses the same dom element or to use the title attribute.

Answer 2

Please try this it should work
/* config object */
$scope.uiConfig = {
calendar:{
height: 700,
editable: true,
header: {
left: 'prev,next title',
//center: 'title',
right: 'month,agendaWeek,'
},
eventRender: getEvents
}
};
$scope.eventSources = [];
function getEvents(callback){
console.log(from); // For test purposes
// Request for data from server and when it comes, call callback to update calendar
var resource = Restangular.all('api/events/');
resource.getList().then(function(events){
$scope.events = events;
callback(events);
});
}
};