diff --git a/web/skins/bootstrap/js/controllers.js b/web/skins/bootstrap/js/controllers.js
index 264aedfa7..f45357748 100644
--- a/web/skins/bootstrap/js/controllers.js
+++ b/web/skins/bootstrap/js/controllers.js
@@ -57,16 +57,20 @@ ZoneMinder.controller('EventsController', function($scope, Events, $modal) {
 	// This is called when a user clicks on an event.
 	// It fires up a modal and passes it the EventId of the clicked event
 	// EventController takes over from there.
-	$scope.displayEvent = function (eventId) {
-		$scope.eventId = eventId;
+	$scope.displayEvent = function (index) {
+		var event = $scope.events[index];
 
 		var modalInstance = $modal.open({
 			templateUrl: '/?view=event&skin=bootstrap',
 			controller: 'EventController',
-			resolve: { eventId: function () { return $scope.eventId; } }
+			resolve: {
+				eventId: function () { return event.Event.Id; },
+				index: function () { return index; }
+			 }
 		});
 
-		modalInstance.result.then(function (selectedItem) {
+		modalInstance.result.then(function (index) {
+				$scope.events.splice(index, 1);
 			}, function () {
 				console.log('Modal dismissed at: ' + new Date());
 			}
@@ -74,7 +78,7 @@ ZoneMinder.controller('EventsController', function($scope, Events, $modal) {
 	};
 });
 
-ZoneMinder.controller('EventController', function($scope, Event, $modalInstance, eventId) {
+ZoneMinder.controller('EventController', function($scope, Event, $modalInstance, eventId, index) {
 
 	Event.get(eventId).then(function(results) {
 		$scope.eventId			= eventId;
@@ -96,8 +100,9 @@ ZoneMinder.controller('EventController', function($scope, Event, $modalInstance,
 		$modalInstance.dismiss('cancel');
 	};
 
-	$scope.deleteEvent = function() {
+	$scope.delete= function() {
 		Event.delete(eventId).then(function(results) {
+			$modalInstance.close(index);
 			console.log(results);
 		});
 	};
diff --git a/web/skins/bootstrap/views/event.php b/web/skins/bootstrap/views/event.php
index 73e5a5fc4..c48641d92 100644
--- a/web/skins/bootstrap/views/event.php
+++ b/web/skins/bootstrap/views/event.php
@@ -20,7 +20,7 @@
 
 <div class="modal-footer">
 	<span class="pull-right glyphicon glyphicon-chevron-right"><span class="sr-only">Next</span></span>
-	<button type="button" class="btn btn-danger" ng-click="deleteEvent()">Delete</button>
+	<button type="button" class="btn btn-danger" ng-click="delete()">Delete</button>
 	<button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
 	<span class="pull-left glyphicon glyphicon-chevron-left"><span class="sr-only">Previous</span></span>
 </div>
diff --git a/web/skins/bootstrap/views/events.php b/web/skins/bootstrap/views/events.php
index 915376e9e..dc03a7b32 100644
--- a/web/skins/bootstrap/views/events.php
+++ b/web/skins/bootstrap/views/events.php
@@ -20,7 +20,7 @@
 
 			<div class="col-md-10">
 				<div class="clearfix events">
-					<div class="event" dir-paginate="event in events | itemsPerPage: eventsPerPage" total-items="totalEvents" ng-click="displayEvent(event.Event.Id)">
+					<div class="event" dir-paginate="event in events | itemsPerPage: eventsPerPage" total-items="totalEvents" ng-click="displayEvent($index)">
 						<img ng-src="/events/{{ event.thumbData.Path }}" class="img-thumbnail" alt="..."/>
 						<div class="over">
 							<div class="info">