<!DOCTYPE html>

    <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>

  <body ng-app="demo">
  <ion-pane >
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      <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 ng-controller="slidesCtrl">
            <h1>Slide Index: {{ui.index}}</h1>
            <button ng-click="nextSlide()" ng-show="presentor">Next</button>

// 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) {
    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.

.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

    // 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


/* Styles go here */