Dynamic Slides

how about removing a slide dynamically ? I can't success.

diff --git a/index.html b/index.html
index 6b8c6d2..0fc5821 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,7 @@
   <script id="firstSlide.html" type="text/ng-template">
     <h1>First Slide!</h1>
     <button class="button button-assertive" ng-click="showBonus()" ng-if="data.initialInstruction">Show Bonus Slide</button>
+    <button class="button button-positive" ng-click="hideBonus()" ng-if="!data.initialInstruction">Hide Bnous Slide</button>
     <p class="padding" ng-if="data.initialInstruction">Notice at first there are only 3 slides</p>
     <p class="padding" ng-if="data.secondInstruction">Now there are 4 slides</p>
 
diff --git a/index.js b/index.js
index a2ba5da..da42964 100644
--- a/index.js
+++ b/index.js
@@ -76,6 +76,16 @@ angular.module('ionicApp', ['ionic'])
 
     $ionicSlideBoxDelegate.update();
   };
+  
+  $scope.hideBonus = function() {
+    var index = _.findIndex($scope.data.slides, { template : 'bonusSlide.html' });
+    $scope.data.slides[index].viewable = false;
+    countSlides();
+    $scope.data.initialInstruction = true
+    $scope.data.secondInstruction = false;
+
+    $ionicSlideBoxDelegate.update();
+  };
 
   // Called each time the slide changes
   $scope.slideChanged = function(index) {