title: Remove all events fullcalendar angular js
body: <p>I have events came from the database. Fullcalendar is working fine but how to remove all events in click button. My main goal is to reset all event when i need to. Is this possible or any other ways to achieve this goal. Im new to angular js. really appreciate your help. thanks in advance</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="content-panel" ng-controller="Controller"&gt;
    &lt;div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources" calendar="myCalendar"&gt;&lt;/div&gt;
      &lt;button type="button" ng-click="removeallevents()"&gt;Remove all Event&lt;/button&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>var app = angular.module('app', ['ui.calendar']);
   app.controller('Controller', function($scope, $http ,$timeout){
  
  $scope.events = [];
  
  
  $scope.myevents = function(start, end, timezone, callback) {
    $scope.loaderForm=true;
    var formdata = $scope.data;
    $http.post("EventsDate.php", formdata).then(function (response) {
  
          var events = [];
          var data   = response.data;
  
          angular.forEach(data, function(value, key){
  
              $scope.events.push({
                  id: value.ID,
                  title:  value.titleEvent,
                  start:  value.dateEvent
              });
  
          });
  
        callback(events);
        $scope.loaderForm=false;
  
      });
    }
  
  
     $scope.removeallevents = function() {
        //function to remove all events
    }
  
  
     $scope.uiConfig = {
      calendar:{
          editable: true,
          header:{
            left: 'title',
            center: '',
            right: 'today prev,next'
          },
          dayClick: $scope.addEvent
      }
    };
  
      $scope.eventSources = [$scope.events,$scope.myevents];
      });
  </code></pre>