Angular Bootstrap Calendar Delete/Edit events

Question

a couple of days I'm working on to integrate the calendar in my project. I am actually reusing one of the examples given by the developer. The question is: even if you visit the Demo you'll notice that when you open the dropdown menu with events for a certain day on each line next to an event there are a delete and edit bootstrap glyphs. When you click on any of them an alert pops up telling you that the event's been deleted but physically the event remains there after that. What I am trying to do is to make this glyphs onClick to literally delete an even from the drop-down just like the red Delete in the bottom right corner does by the way. I guess it's a matter of 1-2 at most lines of code but I can't still make it work.

      <button
        class="btn btn-danger"
        ng-click="vm.events.splice($index, 1)">
        Delete
      </button>

This works, this is the 'bottom right button'. ^

onClick: function(args) {
    alert.show('Deleted', args.calendarEvent);
    console.log("event Deleted");
    vm.events.splice($index, 1);
  }

This doesn't. Thank you in advance.

Answer 1

vm.events.splice(vm.events.indexOf(event), 1);

This is actually the line of code which fixes it, I figured it out. The problem was that $index is not defined anywhere so if you use it in the form I did at the first post then you'll receive exceptions. If you use the line I'm just giving you now you'll fix this deliberate, I guess, incompleteness of the example code.