Fullcalendar: How to dynamically bind/add events with angularjs
<p>how can I optimize my fullcalendar to dynamically add/bind events. I cannot find any usefull resources for angular. Most of the docs are jquery. Below is my set up. I have added the eventRender function but not filled. Thanks for the help..</p>

<pre><code> function clearCalendar(){
        if(uiCalendarConfig.calendars.myCalendar != null){
            uiCalendarConfig.calendars.myCalendar.fullCalendar('removeProjects');
            uiCalendarConfig.calendars.myCalendar.fullCalendar('unselect')

        }
    }

function populate() {
        clearCalendar();
        $http.get('/projs', {
            cache: false,
            params: {}
        }).then(function data) {

            angular.forEach(data.data, function (value) { 
                $scope.projects.push({ 
                    projectID : value.projectID,
                    client : value.client,
                    title: value.title,
                    description: value.description, 
                    start: new moment(value.startAt),
                    end: new moment(value.endAt),
                    employees: value.employees,
                    allDay: value.isFullDay,
                    stick: true  
                });
            });
        });
    }
    populate();


$scope.uiConfig = {
    calendar: {
        height: 500,
        editable: true,
        displayEventTime: true,
        header: {
            left: 'month, agendaWeek, agendaDay',
            center: 'title',
            right: 'today prev,next'
        },

        selectable: true,
        selectHelper: true,

        select: function(start, end){
            $scope.showSelected = false;
            var fromDate = moment(start).format('DD/MM/YYYY LT');
            var endDate  = moment(end).format('DD/MM/YYYY LT');

            $scope.Project = { 
                ProjectID : 0,
                Client: '',
                Title : '',
                Description: '',
                Employees: '',
                StartAt : fromDate,
                EndAt : endDate,
                IsFullDay : false
            }

            $scope.ShowModal()
        },

        eventClick: function (project) { 
            $scope.showSelected = true;
            $scope.SelectedProject = project;

            var fromDate = moment(project.start).format('DD/MM/YYYY LT');
            var endDate  = moment(project.end).format('DD/MM/YYYY LT');

            $scope.Project = { 
                ProjectID : project.projectID, 
                Client : project.client,
                Title : project.title,
                Description: project.description,
                Employees: project.employees,
                StartAt : fromDate,
                EndAt : endDate,
                IsFullDay : false   
            }
            $scope.ShowModal()
        },

        eventRender: function(event, element, view) {

        },

        eventAfterAllRender: function (){
            if($scope.projects.length &gt; 0 &amp;&amp; isFirstTime) {
                uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.projects[0].start);
                isFirstTime = false;
            }
        }
    }
};
</code></pre>

<p><strong>calendar</strong> in my html</p>

<pre><code>    &lt;div class="col-md-8"&gt;
        &lt;div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSource" calendar="myCalendar"&gt;&lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p><strong>UPDATE</strong></p>

<p>current display on calendar</p>

<p><a href="https://i.stack.imgur.com/Pbjmu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pbjmu.png" alt="enter image description here"></a></p>