Refresh Events In Angular Calendar UI (Fullcalendar) With Laravel As A Backend

I am trying to make an automated refresh calendar. I am using Calendar UI and i am getting data from my backend in this way

  /**Calendar Config***/
      //config object
                $scope.uiConfig = {
                    calendar:{
                        height: 500,
                        width: 800,
                        editable: false,
                        //First Hour
                        firstHour: 8,
                        //Devide by half hour
                        slotMinutes: 30,
                        //default duration 01:30
                        defaultEventMinutes: 90,
                        axisFormat: 'HH:mm',
                        timeFormat: {
                            agenda: 'H:mm{ - H:mm}'
                        },
                    header:{
                        //Buttons
                        center: 'month agendaWeek agendaDay',
                        left: 'title',
                        right: 'today prev,next'
              },
              defaultView: 'agendaWeek'
            }
          };

      //Get planings By Group
            $scope.getPlaningsByGroup = function(groupId){
                planing.getPlaningsByGroup(groupId)
                    .success(function(data){
                        //Populate the event object
                        $scope.populatePlan(data);
                    });
                }

      //Populating the plan
      $scope.events = [];
      $scope.populatePlan = function(plans){
        plans.forEach(function(plan){
          start_time = moment.duration(plan.start_time);;
          duration = moment.duration(plan.course.duration);
          start_course = moment()
                          .day(plan.day)
                          .hour(start_time.hours())
                          .minutes(start_time.minutes())
                          .seconds(start_time.seconds())
                          .format("YYYY-MM-DDTHH:mm:ss");



          end_time = start_time.add(duration);
          end_course = moment()
                          .day(plan.day)
                          .hour(end_time.hours())
                          .minutes(end_time.minutes())
                          .seconds(end_time.seconds())
                          .format("YYYY-MM-DDTHH:mm:ss");

          console.log(end_course);

          $scope.events.push(
                  {
                    id:plan.id,
                    title:plan.course.title,
                    start:start_course,
                    end :end_course,
                    allDay:false,
                  }
            );


        });
      }
      //Event Source object
      $scope.eventSources = [$scope.events];

I don't know if it is the wierdest way to do it but i am still a babe at angular js so please excuse this crime scene ^^ . i did a little reasearch and i decided to go with $interval provider to refresh the events. and here is the problems that i faced after trying: Try 1 : //Refresh events var refresh = function(){ $('#calendar').fullCalendar('rerenderEvents'); console.log("refreshed"); } $interval(refresh, 3000); refresh();

Basically this did nothing Try 2 : //Refresh events var refresh = function(){ $scope.events.length = 0; $scope.getPlaningsByGroup($scope.student.group_id); console.log("refreshed"); } $interval(refresh, 3000); refresh();

And this worked but i know that this is a suicide attempt to the backend. My Question is how to solve this madness. Thanks