synchronized slides

<!DOCTYPE html>
<html>

  <head>
    <link data-require="ionic@*" data-semver="1.0.0-beta6" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" />
    <script data-require="ionic@*" data-semver="1.0.0-beta6" src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
    <script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="demo">
  <ion-pane >
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content class="has-header">
        <ion-slide-box >
          
          <ion-slide ng-controller="slidesCtrl">
           <h1></j1>Slide Index: {{ui.index}}</h1>
            <button ng-click="nextSlide()" ng-show="presentor">Next</button>
          </ion-slide>
          
          <ion-slide ng-controller="slidesCtrl">
            <h1>Slide Index: {{ui.index}}</h1>
            <button ng-click="nextSlide()" ng-show="presentor">Next</button>
          </ion-slide>
          
      </ion-slide-box>
      </ion-content>
    </ion-pane>
    
  </body>


</html>

// Code goes here

angular.module('demo', ['ionic', 'firebase'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // Set the statusbar to use the default style, tweak this to
      // remove the status bar on iOS or change it to use white instead of dark colors.
      StatusBar.styleDefault();
    }
  });
})

.controller('slidesCtrl', function ($scope, $ionicSlideBoxDelegate, $firebase, $stateParams) {
  // This should come from the url. Faking it inside plunkr
  $stateParams.presentor = true;
  $scope.presentor = $stateParams.presentor !== undefined;
  
  // Initializing our presentation index to 0
  $scope.ui = {
    index: 0
  };
  
  $scope.nextSlide = function() {

    // When user clicks next, we programatically slide to the next slide using ionicSlideBoxDelegate
    $ionicSlideBoxDelegate.next();

    // Then we make sure we update our index to the current slides index. 
    $scope.ui.index = $ionicSlideBoxDelegate.currentIndex();
  }

  // Create a reference to our firebase pool
  var ref = new Firebase("https://sync-slides.firebaseio.com/");

  // Create a new object inside the pool and assign it to a local variable as an object
  var syncedSlidesIndex = $firebase(ref).$asObject();
  
  // Set up a three way binding between the firebase object and the ui object inside scope.
  syncedSlidesIndex.$bindTo($scope, "ui" ).then(function(){
    $scope.ui.index = 0;
  });
  
  // Set up a listener so that we are notified when this object changes - either from our instance or from firebase
  syncedSlidesIndex.$watch(function() {
    // When the object changes, we change the slide to the prper index
    $ionicSlideBoxDelegate.slide($scope.ui.index);
  });
  

})

/* Styles go here */