Problem clearing events in Angular

A few notes:

1. When performing the operations on the events you can either modify the model or use the direct methods.

The difference is that the direct methods call $apply to notify Angular about the changes.

$scope.dp.events.add(new DayPilot.Event(ev));  // direct API

is an equivalent of

$scope.$apply(function() {
  $scope.events.push(ev);  // modify the model
});

If you call the direct methods in the context that is already executed within $apply you will get "Error: $rootScope:inprog Action Already In Progress". All methods invoked using AngularJS bindings (e.g. ng-click) are automatically executed inside $apply block.

2. If you modify the model, don't call dp.update() but make sure it's inside an $apply() block.

Replace

  $scope.clearEvents = function() {
    $scope.events = [];
    $scope.dp.update();
  };

with

  $scope.clearEvents = function() {
    $scope.events = [];
  };

3. You are replacing the $scope.events object with a new array. The first time this is detected by Angular as a change (the array elements are different). It tells the Scheduler to use the new array. The second time you click it you replace it with yet another array but this time it is not detected by Angular as a new array (both arrays are empty). The Scheduler is not notified and it continues using the old array.

Replace

  $scope.clearEvents = function() {
    $scope.events = [];
  };

with

  $scope.clearEvents = function() {
    $scope.events.splice(o, $scope.events.length);
  };

See also the fixed example:

http://jsfiddle.net/stj3xogu/3/

Ah, that makes sense. Thanks for the assist!

Updated fiddle for this in Angular "Controller As" syntax (the above fiddle wasn't working).
http://jsfiddle.net/ekrLajw4/