title: Ionic slide box with button bar
body: <p>I have an ionic slide box with 4 slides. You can switch between slides by clicking buttons on the bottom of the screen. How do I add class 'active' (using AngularJS) to the button when it's corresponding slide is active? </p>
  
  <p>For example, if the second slide is active I want second button to have class 'active'. When you move to third slide (either by clicking third button or by sliding the screen), class 'active' is removed from second button and added to third button.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>menu.html</strong></p>
  
  <pre><code>&lt;ion-view view-title="Menu"&gt;
  
      &lt;ion-content class="padding"&gt;
  
          &lt;ion-slide-box on-slide-changed="activateTabs($index)"&gt;
  
              &lt;ion-slide&gt;
                  &lt;h1&gt; Slide 1 &lt;/h1&gt;
              &lt;/ion-slide&gt;
  
              &lt;ion-slide&gt;
                  &lt;h1&gt; Slide 2 &lt;/h1&gt;
              &lt;/ion-slide&gt;
  
              &lt;ion-slide&gt;
                  &lt;h1&gt; Slide 3 &lt;/h1&gt;
              &lt;/ion-slide&gt;
  
              &lt;ion-slide&gt;
                  &lt;h1&gt; Slide 4 &lt;/h1&gt;
              &lt;/ion-slide&gt;
  
          &lt;/ion-slide-box&gt;
  
      &lt;/ion-content&gt;
  
      &lt;div class="button-bar"&gt;
          &lt;a class="button button-stable" ng-click="slide(0)"&gt;1&lt;/a&gt;
          &lt;a class="button button-stable" ng-click="slide(1)"&gt;2&lt;/a&gt;
          &lt;a class="button button-stable" ng-click="slide(2)"&gt;3&lt;/a&gt;
          &lt;a class="button button-stable" ng-click="slide(3)"&gt;4&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/ion-view&gt;
  </code></pre>
  
  <p><strong>MenuCtrl.js</strong></p>
  
  <pre><code>myApp
  
  .controller('MenuCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate){
  
      $scope.slide = function(to) {
          $scope.current = to;
          $ionicSlideBoxDelegate.slide(to);
      }
  
  });
  </code></pre>