Events not appearing in angular ui calendar - angularjs

Question

I'm using Angular ui calendar in my app.
Everything is working fine. The calendar is showing, but events are not appearing in the calendar.
Here is my code: -
$timeout(function() {
$scope.events = [
{
title: 'Long Event',
start: '2019-01-10'
}
];
$scope.eventSources = [$scope.events];
return $scope.uiConfig = {
calendar: {
height: 450,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
}
}
};
},5000);
Here I'm using timeout because I want some delay for calendar to be loaded.
This is my HTML code: -
<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="events" calendar="myCalendar" style="height:700px;"></div>
The docs suggest you should give an array named eventSources. I have given it, but nothing works.
Please suggest what I'm doing wrong.
Here is the screenshot: -

Answer 1

You are initializing scope variables after sometime 5 seconds, your calendar is getting the undefined variables and hence if you check your console there are errors., what you need to do is to load the calendar only when this variables comes defined.
So, you need
ng-if="uiConfig!==undefined"
if this variables defined then only your calendar will comes into picture.
Your div should look like this
<div class="span8" ng-if="uiConfig!==undefined">
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
</div>
this will make sure to initialize when this variables has some values.
Demo