From 597e28c957362275e6b47098b33c719f40cf08b1 Mon Sep 17 00:00:00 2001
From: Andrew <andrewtjoslin@gmail.com>
Date: Wed, 26 Nov 2014 09:30:58 -0700
Subject: [PATCH] refactor(slideBox): properly use size of parent, perf
 increase

---
 js/angular/controller/slideBoxController.js   | 560 ++++++++++--------
 js/angular/controller/slideController.js      | 101 ----
 js/angular/directive/slide.js                 |  20 +-
 js/angular/directive/slideBox.js              |  37 +-
 js/angular/directive/slideBoxPager.js         |  64 +-
 js/utils/list.js                              | 176 ------
 scss/_mixins.scss                             |   1 +
 scss/_slide-box.scss                          |  57 +-
 test/html/slideBox.html                       |  32 +-
 .../controller/slideBoxController.unit.js     | 133 -----
 .../controller/slideController.unit.js        |  35 --
 test/unit/angular/directive/slide.unit.js     |  23 -
 test/unit/angular/directive/slideBox.unit.js  | 437 ++++++++++----
 .../unit/angular/directive/slidePager.unit.js |  14 +-
 test/unit/utils/list.unit.js                  | 141 -----
 15 files changed, 752 insertions(+), 1079 deletions(-)
 delete mode 100644 js/angular/controller/slideController.js
 delete mode 100644 js/utils/list.js
 delete mode 100644 test/unit/angular/controller/slideBoxController.unit.js
 delete mode 100644 test/unit/angular/controller/slideController.unit.js
 delete mode 100644 test/unit/angular/directive/slide.unit.js
 delete mode 100644 test/unit/utils/list.unit.js

diff --git a/js/angular/controller/slideBoxController.js b/js/angular/controller/slideBoxController.js
index f1e62d6112..f6d392e931 100644
--- a/js/angular/controller/slideBoxController.js
+++ b/js/angular/controller/slideBoxController.js
@@ -2,72 +2,62 @@ IonicModule
 .controller('$ionSlideBox', [
   '$scope',
   '$element',
-  '$$ionicAttachDrag',
-  '$interval',
-  '$rootScope',
-  '$timeout',
   '$log',
-function(scope, element, $$ionicAttachDrag, $interval, $rootScope, $timeout, $log) {
+  '$document',
+  '$$q',
+  '$timeout',
+  '$interval',
+  '$$ionicAttachDrag',
+  '$rootScope',
+function(scope, element, $log, $document, $$q, $timeout, $interval, $$ionicAttachDrag, $rootScope) {
   var self = this;
-
-  var relevantSlides = {
-    previous: null,
-    selected: null,
-    next: null
-  };
-  var oldRelevantSlides = relevantSlides;
-
-  // This is a live nodeList that is updated whenever child ion-slides
-  // are added or removed
-  var slideNodes = element[0].getElementsByTagName('ion-slide');
-  var slideList = ionic.Utils.list(slideNodes);
-
-  var slidesParent = angular.element(element[0].querySelector('.slider-slides'));
-
-  // Successful slide requires velocity to be greater than this amount
+  var SLIDE_TRANSITION_DURATION = 250;
   var SLIDE_SUCCESS_VELOCITY = (1 / 4); // pixels / ms
-  var SLIDE_TRANSITION_DURATION = 250; //ms
 
-  $$ionicAttachDrag(scope, element, {
-    getDistance: function() { return slidesParent.prop('offsetWidth'); },
+  var container = angular.element(element[0].querySelector('.slider-slides'));
+  var containerId = 'slides_' + ionic.Utils.nextUid();
+  container.attr('id', containerId);
+
+  // Live-updated list of slides
+  var slideNodes = container[0].getElementsByTagName('ion-slide');
+
+  // Used in setDisplayedSlides() below
+  var styleElement = angular.element('<style>');
+  $document[0].body.appendChild(styleElement[0]);
+  scope.$on('$destroy', function() { styleElement.remove(); });
+
+  // If we're already sliding and a new selection is triggered, add it to the queue,
+  // to be taken off once the current slide animation is done
+  var slideQueue = [];
+  // Whether we're currently sliding through the slideQueue
+  var isSliding = false;
+
+  var slideCount = 0;
+  var selectedIndex = -1;
+  var isLoop = false;
+
+  self.element = element;
+
+  self.autoPlay = autoPlay;
+  self.count = count;
+  self.enableSlide = enableSlide;
+  self.isValidIndex = isValidIndex;
+  self.loop = loop;
+  self.next = next;
+  self.onAddSlide = onAddSlide;
+  self.onRemoveSlide = onRemoveSlide;
+  self.previous = previous;
+  self.select = select;
+  self.selected = selected;
+
+  $$ionicAttachDrag(scope, container, {
+    getDistance: function () { return container.prop('offsetWidth'); },
     onDragStart: onDragStart,
     onDrag: onDrag,
     onDragEnd: onDragEnd
   });
 
-  // At the very end of every digest, check if slides changed
-  // This is because our nodes won't be added until after data has been processed
-  // (eg you add a slide to data with ng-if, then the ng-if processes and the element
-  // now exists)
-  $rootScope.$watch(function() {
-    if (!checkSlidesChanged.queued) {
-      $rootScope.$$postDigest(checkSlidesChanged);
-    }
-    return true;
-  });
-
-  self.element = element;
-  self.isRelevant = isRelevant;
-  self.previous = previous;
-  self.next = next;
-
-  // Methods calling straight back to Utils.list
-  self.at = at;
-  self.count = slideList.count;
-  self.indexOf = indexOf;
-  self.isInRange = slideList.isInRange;
-  self.loop = slideList.loop;
-  self.delta = slideList.delta;
-
-  self.enableSlide = enableSlide;
-  self.autoPlay = autoPlay;
-  self.selected = selected;
-  self.select = select;
-  self.onDragStart = onDragStart;
-  self.onDrag = onDrag;
-  self.onDragEnd = onDragEnd;
-
-  // DEPRECATED, as of v1.0.0-beta14 -------
+  /****** DEPRECATED, as of v1.0.0-beta14 ********/
   self.update = deprecated.method(
     '$ionicSlideBoxDelegate.update() has been deprecated! Slidebox updates on its own now.',
     $log.warn,
@@ -84,14 +74,14 @@ function(scope, element, $$ionicAttachDrag, $interval, $rootScope, $timeout, $lo
      self.select
   );
   self.slidesCount = deprecated.method(
-     '$ionicSlideBoxDelegate.slidesCount has been deprecated! Use self.slidesCount() instead.',
+     '$ionicSlideBoxDelegate.slidesCount() has been deprecated! Use self.count() instead.',
      $log.warn,
      self.count
   );
   self.stop = deprecated.method(
     '$ionicSlideBoxDelegate.stop() has been deprecated! Use $ionicSlideBoxDelegate.autoPlay(0) to stop instead.',
     $log.warn,
-    function() {
+    function stopDeprecated() {
       self._stoppedInterval = self.autoPlayInterval;
       self.autoPlay(0);
     }
@@ -99,54 +89,14 @@ function(scope, element, $$ionicAttachDrag, $interval, $rootScope, $timeout, $lo
   self.start = deprecated.method(
     '$ionicSlideBoxDelegate.start() has been deprecated! Use $ionicSlideBoxDelegate.autoPlay(newInterval) to start instead.',
     $log.warn,
-    function() {
+    function startDeprecated() {
       self.autoPlay(self._stoppedInterval);
     }
   );
-  // END DEPRECATED -------
 
-
-  // ***
-  // Public Methods
-  // ***
-  function at(index) {
-    return jqLite( slideList.at(index) ).controller('ionSlide');
-  }
-
-  function indexOf(slide) {
-    return slide && slideList.indexOf(slide.node) || -1;
-  }
-
-
-  // Gets whether the given index is relevant to selected
-  // That is, whether the given index is previous, selected, or next
-  function isRelevant(index) {
-    return slideList.isRelevant(index, scope.selectedIndex);
-  }
-
-  // Gets the index to the previous of the given slide, default scope.selectedIndex
-  function previous(index) {
-    index = arguments.length ? index : scope.selectedIndex;
-    // If we only have two slides and loop is enabled, we cannot have a previous
-    // because previous === next. In this case, return -1.
-    if (self.loop() && self.count() === 2) {
-      return -1;
-    }
-    return slideList.previous(index);
-  }
-
-  // Gets the index to the next of the given slide, default scope.selectedIndex
-  function next(index) {
-    index = arguments.length ? index : scope.selectedIndex;
-    return slideList.next(index);
-  }
-
-  function enableSlide(isEnabled) {
-    if (arguments.length) {
-      self.dragDisabled = !isEnabled;
-    }
-    return !!self.dragDisabled;
-  }
+  /***************************
+   * Public Methods
+   ***************************/
 
   function autoPlay(newInterval) {
     self.autoPlayInterval = newInterval;
@@ -159,169 +109,295 @@ function(scope, element, $$ionicAttachDrag, $interval, $rootScope, $timeout, $lo
     }
   }
 
-  function selected() {
-    return self.isInRange(scope.selectedIndex) ? scope.selectedIndex : -1;
+  function count() {
+    return slideCount;
   }
 
-  /*
-   * Select and change slides
-   */
-  function select(newIndex, transitionDuration, force) {
-    if (!self.isInRange(newIndex)) return;
+  function enableSlide(enable) {
+    if (arguments.length) self.dragDisabled = !enable;
+    return !self.dragDisabled;
+  }
 
-    scope.selectedIndex = newIndex;
+  function isValidIndex(index) {
+    return index > -1 && index < self.count();
+  }
 
-    oldRelevantSlides = relevantSlides;
-    relevantSlides = {
-      previous: self.at(self.previous()),
-      selected: self.at(newIndex),
-      next: self.at(self.next())
-    };
+  function loop(loopValue) {
+    if (arguments.length) isLoop = !!loopValue;
+    return isLoop;
+  }
 
-    if (!force &&
-        oldRelevantSlides.next === relevantSlides.next &&
-        oldRelevantSlides.previous === relevantSlides.previous &&
-        oldRelevantSlides.selected === relevantSlides.selected) {
-      // do nothing;
-      return;
+  // gives the next index relative to the given index (default selectedIndex)
+  function next(index) {
+    index = arguments.length ? index : selectedIndex;
+    var nextIndex = index + 1;
+    if (nextIndex >= self.count()) {
+      // We can't have a next if there's only one item...
+      if (isLoop && self.count() > 1) return 0;
+      return -1;
     }
+    return nextIndex;
+  }
 
 
-    slidesParent.css(
-      ionic.CSS.TRANSITION_DURATION,
-      (transitionDuration || SLIDE_TRANSITION_DURATION) + 'ms'
-    );
-
-    var delta = self.delta(scope.selectedIndex, newIndex);
-    if (self.isInRange(scope.selectedIndex) && Math.abs(delta) > 1) {
-      // if the new slide is > 1 away, then it is currently not attached to the DOM.
-      // Attach it in the position from which it will slide in.
-      self.at(newIndex).setState(delta > 1 ? 'next' : 'previous');
-      // Wait one frame so the new slide can 'settle' in its new place and
-      // be ready to properly transition in
-      ionic.requestAnimationFrame(doSelect);
-    } else {
-      doSelect();
-    }
-
-    function doSelect() {
-      // If a new selection has happened before this frame, abort.
-      if (scope.selectedIndex !== newIndex) return;
-      scope.$evalAsync(function() {
-        if (scope.selectedIndex !== newIndex) return;
-        arrangeSlides(newIndex);
+  // If slides are added or removed, we only want to re-set the selected index
+  // once per digest.
+  function enqueueSelect(index) {
+    enqueueSelect.index = index;
+    if (!enqueueSelect.queued) {
+      enqueueSelect.queued = true;
+      scope.$$postDigest(function() {
+        enqueueSelect.queued = false;
+        select(enqueueSelect.index);
       });
     }
   }
 
+  // Called by ionSlide directive
+  function onAddSlide() {
+    slideCount++;
+    // If we're waiting for a certain slide to be added so we can select it,
+    // or we just have selectedIndex at -1, go ahead and select.
+    if ((!angular.isNumber(scope.selected) || scope.selected < self.count()) &&
+        !self.isValidIndex(selectedIndex)) {
+      enqueueSelect(self.isValidIndex(scope.selected) ? scope.selected : 0);
+
+    } else if (self.isValidIndex(selectedIndex)) {
+      // 'Refresh' the selection at end of digest when a new slide is added
+      enqueueSelect(selectedIndex);
+    }
+  }
+
+  // Called by ionSlide directive
+  function onRemoveSlide() {
+    slideCount--;
+    if (selectedIndex >= self.count()) {
+      enqueueSelect( Math.max(selectedIndex - 1, 0) );
+
+    } else if (self.isValidIndex(selectedIndex)) {
+      // 'Refresh' the selection at end of digest when a slide is removed
+      enqueueSelect(selectedIndex);
+    }
+  }
+
+  // gives the previous index relative to the given index (default selectedIndex)
+  function previous(index) {
+    index = arguments.length ? index : selectedIndex;
+    var previousIndex = index - 1;
+    if (previousIndex < 0) {
+      // EDGE CASE: If there are only two slides and loop is enabled, we cannot have a previous
+      // because previous === next. Only loop with previous if we have at least 3 slides
+      if (isLoop && slideCount > 2) {
+        return self.count() - 1;
+      }
+      return -1;
+    }
+    return previousIndex;
+  }
+
+  // adds data to the queue for selection.
+  // Index can be either a number or a getter (to be called when starting the slide)
+  function select(newIndex, transitionDuration, isDrag) {
+    // Don't add selection to queue if the last selection in the list is already
+    // the same index
+    if ( (slideQueue[0] || {}).index === newIndex ) return;
+
+    slideQueue.unshift([
+      angular.isFunction(newIndex) ? newIndex : function() { return newIndex; },
+      transitionDuration || SLIDE_TRANSITION_DURATION,
+      !!isDrag
+    ]);
+
+    if (!isSliding) {
+      runSelectQueue();
+    }
+  }
+
+  function selected() {
+    return selectedIndex;
+  }
+
+  /***************************
+   * Private Methods
+   ***************************/
+
+  function getDelta(fromIndex, toIndex) {
+    var difference = toIndex - fromIndex;
+    if (!isLoop) return difference;
+
+    // If looping is on, check for the looped difference.
+    // For example, going from the first item to the last item
+    // is actually a change of -1.
+    var loopedDifference = 0;
+    if (toIndex > fromIndex) {
+      loopedDifference = toIndex - fromIndex - self.count();
+    } else {
+      loopedDifference = self.count() - fromIndex + toIndex;
+    }
+    if (Math.abs(loopedDifference) < Math.abs(difference)) {
+      return loopedDifference;
+    }
+    return difference;
+  }
+
+  // Recursively takes an item off slideQueue array, selects it,
+  // then repeats until nothing is left in the slideQueue.
+  // Once slideQueue is empty, publishes the select data to scope.
+  function runSelectQueue() {
+    isSliding = slideQueue.length > 0;
+    if (isSliding) {
+      var data = slideQueue.pop();
+      data[0] = data[0](); //index is a getter
+      slideTo.apply(null, data).then(runSelectQueue);
+    } else {
+      // Publish the data to scope once we're all done
+      scope.$evalAsync(function() {
+        scope.selected = selectedIndex;
+        scope.onSlideChanged({
+          $index: selectedIndex, //DEPRECATED $index
+          $slideIndex: selectedIndex
+        });
+      });
+    }
+  }
+
+  function slideTo(newIndex, duration, isDrag) {
+    // Immediately finish invalid selection
+    if (!self.isValidIndex(newIndex)) return $$q.when();
+
+    var deferred = $$q.defer();
+    var delta = getDelta(selectedIndex, newIndex);
+    var width = slideNodes[newIndex].offsetWidth;
+    var direction;
+    var translatePx;
+
+    // We're interested in isDrag, because a failed drag is the only case
+    // where we want to run a slide animation yet have no change in selectedIndex
+    if (!isDrag && (delta === 0 || selectedIndex === -1)) {
+      // Instantly slide over if there's no change or we don't already have a selected index
+      finishSliding();
+    } else {
+      // Make sure the newIndex is one of the three displayed slides before
+      // trying to transition to it
+      if (delta < 0) {
+        direction = 'previous';
+        translatePx = width;
+        setDisplayedSlides(newIndex, selectedIndex, self.next());
+      } else if (delta > 0) {
+        direction = 'next';
+        translatePx = -width;
+        setDisplayedSlides(self.previous(), selectedIndex, newIndex);
+      } else {
+        direction = '';
+        translatePx = 0;
+        setDisplayedSlides(self.previous(), selectedIndex, self.next());
+      }
+
+      container.css(ionic.CSS.TRANSITION_DURATION, duration + 'ms');
+      // Wait for transitionDuration css to apply...
+      ionic.requestAnimationFrame(function() {
+        container.css(ionic.CSS.TRANSFORM, 'translate3d(' + translatePx + 'px,0,0)');
+        $timeout(finishSliding, duration, false);
+      });
+    }
+
+    return deferred.promise;
+
+    function finishSliding() {
+      container.css(ionic.CSS.TRANSITION_DURATION, '0ms');
+      // Wait for transitionDuration css to apply...
+      ionic.requestAnimationFrame(function() {
+        setSelectedSlide(newIndex);
+        deferred.resolve();
+      });
+    }
+  }
+
+  function setSelectedSlide(newIndex) {
+    selectedIndex = newIndex;
+    container.css(ionic.CSS.TRANSFORM, '');
+    setDisplayedSlides(self.previous(newIndex), newIndex, self.next(newIndex));
+  }
+
+  /**
+   * setDisplayedSlides: set css to show only the three given slide indexes
+   * note: prev & next could both be -1 if there's only one slide in the slidebox
+   */
+  var currentDisplayed = [];
+  function setDisplayedSlides(previous, selected, next) {
+    var newDisplayed = [
+      previous !== -1 && slideNodes[previous],
+      selected !== -1 && slideNodes[selected],
+      next !== -1 && slideNodes[next]
+    ];
+    var oldSlide;
+
+    // Hide & disconnect the currently displayed slides that aren't part of the new slides.
+    for (var i = 0; i < currentDisplayed.length; i++) {
+      oldSlide = currentDisplayed[i];
+      if (oldSlide && newDisplayed.indexOf(oldSlide) === -1) {
+        oldSlide.removeAttribute('slide-display');
+        ionic.Utils.disconnectScope( jqLite(oldSlide).children().scope() );
+      }
+    }
+
+    setDisplay(newDisplayed[0], 'previous');
+    setDisplay(newDisplayed[1], 'selected');
+    setDisplay(newDisplayed[2], 'next');
+
+    function setDisplay(slide, display) {
+      if (!slide) return;
+      var slideScope = jqLite(slide).children().scope();
+      if (slideScope) {
+        ionic.Utils.reconnectScope(slideScope);
+        // Digest the slide so it updates before being shown
+        if (!$rootScope.$$phase) slideScope.$digest();
+      }
+      slide.setAttribute('slide-display', display);
+    }
+
+    // Save the now displayed slides so we can check next time
+    currentDisplayed = newDisplayed;
+  }
+
+
+  /********** DRAGGING **********/
+  var dragWidth;
   function onDragStart() {
-    if (self.dragDisabled) return false;
+    if (self.dragDisabled || !self.count()) return false;
+    if (!isSliding) {
+      // Make sure that the correct slides are to the left and right
+      // before we start dragging
+      setSelectedSlide(selectedIndex);
+    }
+    dragWidth = slideNodes[selectedIndex].offsetWidth;
   }
 
   // percent is negative 0-1 for backward slide
   // positive 0-1 for forward slide
   function onDrag(percent) {
-    var target = self.at(percent > 0 ? self.next() : self.previous());
-    var current = self.at(self.selected());
-
-    target && target.transform(percent);
-    current && current.transform(percent);
+    // Only follow user's finger if we aren't currently sliding
+    if (!isSliding) {
+      container.css(ionic.CSS.TRANSFORM, 'translate3d(' + (-percent * dragWidth) + 'px,0,0)');
+    }
   }
 
   function onDragEnd(percent, velocity) {
-    var nextIndex = -1;
-    if (Math.abs(percent) > 0.5 || velocity > SLIDE_SUCCESS_VELOCITY) {
-      nextIndex = percent > 0 ? self.next() : self.previous();
-    }
+    var isSuccess = Math.abs(percent) > 0.5 || velocity > SLIDE_SUCCESS_VELOCITY;
 
-    // Select a new slide if it's avaiable
-    if (self.isInRange(nextIndex)) {
-      var distanceRemaining = (1 - Math.abs(percent)) * slidesParent.prop('offsetWidth');
-      var transitionDuration = Math.min(
-        distanceRemaining / velocity * 1.25,
-        SLIDE_TRANSITION_DURATION
-      );
-      self.select(nextIndex, transitionDuration);
-    } else {
-      self.select(scope.selectedIndex, 0, true);
-    }
-  }
+    if (isSuccess) {
+      var distanceRemaining = (1 - Math.abs(percent)) * dragWidth;
+      var transitionDuration = Math.min(distanceRemaining / velocity, SLIDE_TRANSITION_DURATION);
 
-  // ***
-  // Private Methods
-  // ***
+      self.select(function getIndex() {
+        // This will be called once this dragend is reached in the select queue.
+        var nextIndex = percent > 0 ? self.next() : self.previous();
+        return self.isValidIndex(nextIndex) ? nextIndex : selectedIndex;
+      }, transitionDuration, true);
 
-  function checkSlidesChanged() {
-    checkSlidesChanged.queued = false;
-
-    // If one of the child nodes was destroyed but not yet removed
-    // from the DOM, we'll enqueue a new digest to re-check
-    // once the element is actually removed.
-    var slideScope;
-    for (var i = 0; i < slideNodes.length; i++) {
-      if ( (slideScope = angular.element(slideNodes[i]).scope()) && slideScope.$$destroyed) {
-        $timeout(angular.noop);
-        break;
-      }
-    }
-
-    if (!relevantSlides.selected) {
-      if (!angular.isNumber(scope.selectedIndex) || scope.selectedIndex === -1) {
-        self.select(0);
-      } else if (self.isInRange(scope.selectedIndex)) {
-        // If we are waiting for a certain scope.selectedIndex that isn't yet selected, select it now.
-        self.select(scope.selectedIndex);
-      }
-
-    } else if (relevantSlides.selected !== self.at(scope.selectedIndex) ||
-               relevantSlides.next !== self.next() ||
-               relevantSlides.previous !== self.previous()) {
-      // If the next, previous, or selected item has been moved or removed,
-      // find what to reselect.
-      var newIndex = self.indexOf(relevantSlides.selected);
-      if (newIndex === -1) {
-        // If the selected slide was removed, try to select the nearest available slide
-        self.select(scope.selectedIndex > 0 ? scope.selectedIndex - 1 : scope.selectedIndex);
-      } else {
-        // Else, reselect the selected slide.
-        self.select(newIndex);
-      }
-    }
-
-  }
-
-  function arrangeSlides() {
-    relevantSlides.previous && relevantSlides.previous.setState('previous');
-    relevantSlides.selected && relevantSlides.selected.setState('selected');
-    relevantSlides.next && relevantSlides.next.setState('next');
-
-    if (oldRelevantSlides) {
-      var oldShown = oldRelevantSlides.selected;
-      var delta = self.delta(self.indexOf(oldRelevantSlides.selected), self.indexOf(relevantSlides.selected));
-      if (Math.abs(delta) > 1) {
-        // If we're changing by more than one slide, we need to manually transition
-        // the current slide out and then put it into its new state.
-        oldShown.setState(delta > 1 ? 'previous' : 'next').then(function() {
-          oldShown.setState(
-            relevantSlides.previous === oldShown ?  'previous' :
-            relevantSlides.next === oldShown ? 'next' :
-            'detached'
-          );
-        });
-      } else {
-        detachIfUnused(oldRelevantSlides.selected);
-      }
-      //Additionally, we need to detach both of the old slides.
-      detachIfUnused(oldRelevantSlides.previous);
-      detachIfUnused(oldRelevantSlides.next);
-    }
-
-    function detachIfUnused(oldSlide) {
-      if (oldSlide && oldSlide !== relevantSlides.previous &&
-          oldSlide !== relevantSlides.selected &&
-          oldSlide !== relevantSlides.next) {
-        oldSlide.setState('detached');
-      }
+    } else if (!isSliding) {
+      // If the drag failed, then just slide back to current slide being the center.
+      slideTo(selectedIndex, SLIDE_TRANSITION_DURATION, true);
     }
   }
 
diff --git a/js/angular/controller/slideController.js b/js/angular/controller/slideController.js
deleted file mode 100644
index 8329f8e45a..0000000000
--- a/js/angular/controller/slideController.js
+++ /dev/null
@@ -1,101 +0,0 @@
-IonicModule
-.controller('$ionSlide', [
-  '$scope',
-  '$element',
-  '$q',
-function(scope, element, $q) {
-  var self = this;
-
-  element.on(ionic.CSS.TRANSITIONEND, onTransitionEnd);
-
-  self.scope = scope;
-  self.element = element;
-  self.node = element[0];
-
-  self.transform = transform;
-
-  self.state = '';
-  self.setState = setState;
-
-  self.setState('detached');
-
-  // ***
-  // Public Methods
-  // ***
-
-  var isTransforming;
-  // percent is negative 0-1 for dragging left
-  // percent is positive 0-1 for dragging right
-  function transform(percent) {
-    if (!isTransforming) {
-      self.element.addClass('no-animate');
-      isTransforming = true;
-    }
-
-    var startPercent = self.state === 'previous' ? -1 :
-      self.state === 'next' ? 1 :
-      0;
-    self.element.css(
-      ionic.CSS.TRANSFORM,
-      'translate3d(' + (100 * (startPercent - percent)) + '%, 0, 0)'
-    );
-  }
-
-  function setState(newState) {
-    if (newState !== self.state) {
-      self.state && self.element.attr('slide-previous-state', self.state);
-      self.element.attr('slide-state', newState);
-    }
-    self.element.css(ionic.CSS.TRANSFORM, '');
-    self.element.removeClass('no-animate');
-    isTransforming = false;
-
-    self.previousState = self.state;
-    self.state = newState;
-
-    switch(newState) {
-      case 'detached':
-        detachSlide();
-        break;
-      case 'previous':
-      case 'next':
-      case 'selected':
-        attachSlide();
-        break;
-    }
-
-    return getTransitionPromise();
-  }
-
-  // ***
-  // Private Methods
-  // ***
-
-  function attachSlide() {
-    ionic.Utils.reconnectScope(scope);
-  }
-
-  function detachSlide() {
-    ionic.Utils.disconnectScope(scope);
-  }
-
-  var transitionDeferred;
-  function getTransitionPromise() {
-    // If we aren't transitioning to or from selected, there's no transition, so instantly resolve.
-    if (self.previousState !== 'selected' && self.state !== 'selected') {
-      return $q.when();
-    }
-
-    // Interrupt current promise if a new state was set.
-    transitionDeferred && transitionDeferred.reject();
-    transitionDeferred = $q.defer();
-
-    return transitionDeferred.promise;
-  }
-
-  function onTransitionEnd(ev) {
-    if (ev.target !== element[0]) return; //don't let the event bubble up from children
-    transitionDeferred && transitionDeferred.resolve();
-  }
-
-}]);
diff --git a/js/angular/directive/slide.js b/js/angular/directive/slide.js
index cb7a6ef621..89d695f0b3 100644
--- a/js/angular/directive/slide.js
+++ b/js/angular/directive/slide.js
@@ -21,13 +21,27 @@ IonicModule
 .directive('ionSlide', ['$timeout', function($timeout) {
   return {
     restrict: 'E',
-    controller: '$ionSlide',
     require: '^ionSlideBox',
-    scope: true,
+    transclude: true,
     link: postLink
   };
 
-  function postLink(scope, element, attr, slideBoxCtrl) {
+  function postLink(scope, element, attr, slideBoxCtrl, transclude) {
     element.addClass('slider-slide');
+
+    slideBoxCtrl.onAddSlide();
+
+    var childScope = scope.$new();
+    // Disconnect by default, will be reconnected if shown
+    ionic.Utils.disconnectScope(childScope);
+
+    transclude(childScope, function(contents) {
+      element.append(contents);
+    });
+
+    scope.$on('$destroy', function() {
+      slideBoxCtrl.onRemoveSlide();
+      element.remove();
+    });
   }
 }]);
diff --git a/js/angular/directive/slideBox.js b/js/angular/directive/slideBox.js
index f518967279..c40d6acc23 100644
--- a/js/angular/directive/slideBox.js
+++ b/js/angular/directive/slideBox.js
@@ -40,7 +40,8 @@ IonicModule
   '$ionicSlideBoxDelegate',
   '$window',
   '$ionicHistory',
-function($ionicSlideBoxDelegate, $window, $ionicHistory) {
+  '$parse',
+function($ionicSlideBoxDelegate, $window, $ionicHistory, $parse) {
 
   return {
     restrict: 'E',
@@ -48,7 +49,7 @@ function($ionicSlideBoxDelegate, $window, $ionicHistory) {
     require: 'ionSlideBox',
     transclude: true,
     scope: {
-      selectedIndex: '=?selected',
+      selected: '=?',
       onSlideChanged: '&'
     },
     template: '<div class="slider-slides" ng-transclude></div>',
@@ -56,6 +57,7 @@ function($ionicSlideBoxDelegate, $window, $ionicHistory) {
   };
 
   function compile(element, attr) {
+    element.addClass('slider');
     // DEPRECATED attr.doesContinue
     isDefined(attr.doesContinue) && attr.$set('loop', attr.doesContinue);
 
@@ -63,7 +65,6 @@ function($ionicSlideBoxDelegate, $window, $ionicHistory) {
   }
 
   function postLink(scope, element, attr, slideBoxCtrl) {
-    element.addClass('slider');
 
     var deregister = $ionicSlideBoxDelegate._registerInstance(
       slideBoxCtrl, attr.delegateHandle, function() {
@@ -75,38 +76,16 @@ function($ionicSlideBoxDelegate, $window, $ionicHistory) {
     isDefined(attr.loop) && watchLoop();
     isDefined(attr.autoPlay) && watchAutoPlay();
 
-    var throttledReposition = ionic.animationFrameThrottle(repositionSlideBox);
-    throttledReposition();
-    angular.element($window).on('resize', throttledReposition);
-
-    scope.$on('$destroy', function() {
-      deregister();
-      angular.element($window).off('resize', throttledReposition);
-    });
+    scope.$on('$destroy', deregister);
 
     // ***
     // Methods
     // ***
 
-    // There is no way to make the slidebox stretch to a large enough size
-    // when its children are all position: absolute elements.
-    // We just make it so the slidebox is *always* as large as its offsetParent.
-    function repositionSlideBox() {
-      element.css({
-        width: (element[0].offsetParent || element[0].parentNode || {}).offsetWidth + 'px',
-        height: (element[0].offsetParent || element[0].parentNode || {}).offsetHeight + 'px'
-      });
-    }
-
     function watchSelected() {
-      scope.$watch('selectedIndex', function selectedAttrWatchAction(newIndex) {
-        if (slideBoxCtrl.isInRange(newIndex)) {
-          scope.onSlideChanged({
-            //DEPRECATED $index
-            $index: newIndex,
-            $slideIndex: newIndex
-          });
-          slideBoxCtrl.select(newIndex);
+      scope.$watch('selected', function(index) {
+        if (slideBoxCtrl.selected() !== index) {
+          slideBoxCtrl.select(index);
         }
       });
     }
diff --git a/js/angular/directive/slideBoxPager.js b/js/angular/directive/slideBoxPager.js
index 8534e8b8d5..12bbe7aaa8 100644
--- a/js/angular/directive/slideBoxPager.js
+++ b/js/angular/directive/slideBoxPager.js
@@ -48,13 +48,6 @@ function($parse) {
   return {
     restrict: 'E',
     require: '^ionSlideBox',
-    scope: {},
-    template:
-      '<div class="slider-pager-page" ' +
-           'ng-repeat="i in pages" ' +
-           'ng-class="{active: i === slideBoxCtrl.selected()}" ' +
-           'ng-click="click(i)">' +
-      '</div>',
     link: postLink
   };
 
@@ -64,27 +57,62 @@ function($parse) {
       function(scope, locals) {
         slideBoxCtrl.select(locals.$slideIndex);
       };
+    var node = element[0];
+
+    // Put it outside the slides container it was transcluded into
+    slideBoxCtrl.element.append(element);
 
     element.addClass('slider-pager');
     scope.slideBoxCtrl = slideBoxCtrl;
     scope.pages = [];
 
-    scope.click = onPagerClicked;
+    element.on('click', onPagerClicked);
     scope.$watch(slideBoxCtrl.count, watchCountAction);
+    scope.$watch(slideBoxCtrl.selected, watchSelectedAction);
 
-    function onPagerClicked(index) {
-      clickFn(scope.$parent, {
-        // DEPRECATED pass in `index` variable
-        index: index,
-        $slideIndex: index,
-      });
+    function onPagerClicked(ev) {
+      for (var i = 0, pager; (pager = node.children[i]); i++) {
+        if (pager === ev.target) {
+          return doClick(i);
+        }
+      }
     }
 
-    function watchCountAction(slidesCount) {
-      scope.pages.length = slidesCount;
-      for (var i = 0; i < slidesCount; i++) {
-        scope.pages[i] = i;
+    function watchCountAction(count, oldCount) {
+      var i;
+      for (i = node.children.length; i < count; i++) {
+        addPager();
       }
+      for (i = count; i < oldCount; i++) {
+        removePager(i);
+      }
+    }
+
+    function watchSelectedAction(selected, oldSelected) {
+      var old = node.children[oldSelected];
+      if (old) old.classList.remove('active');
+      var current = node.children[selected];
+      if (current) current.classList.add('active');
+    }
+
+    //* Extra methods *//
+
+    function doClick(index) {
+      scope.$apply(function() {
+        clickFn(scope, {
+          index: index, // DEPRECATED `index`
+          $slideIndex: index,
+        });
+      });
+    }
+    function addPager() {
+      var pager = document.createElement('div');
+      pager.className = 'slider-pager-page';
+      node.appendChild(pager);
+    }
+    function removePager(i) {
+      var pager = node.children[i];
+      pager && node.removeChild(pager);
     }
   }
 
diff --git a/js/utils/list.js b/js/utils/list.js
deleted file mode 100644
index 9d7ef1cb90..0000000000
--- a/js/utils/list.js
+++ /dev/null
@@ -1,176 +0,0 @@
-(function() {
-
-function trueFn() { return true; }
-
-ionic.Utils.list = wrapList;
-
-// Expose previous and next publicly so we can use them
-// without having to instantiate a whole list wrapper.
-ionic.Utils.list.next = listNext;
-ionic.Utils.list.previous = listPrevious;
-
-// Get the index after the given index.
-// Takes looping and the given filterFn into account.
-function listNext(list, isLooping, index, filterFn) {
-  filterFn = filterFn || trueFn;
-  if (index < 0 || index >= list.length) return -1;
-
-  // Keep adding 1 to index, trying to find an index that passes filterFn.
-  // If we loop through *everything* and get back to our original index, return -1.
-  // We don't use recursion here because Javascript sucks at recursion.
-  var nextIndex = index + 1;
-  while ( nextIndex !== index ) {
-
-    if (nextIndex === list.length) {
-      if (isLooping) nextIndex -= list.length;
-      else break;
-    } else {
-      if (filterFn(list[nextIndex], nextIndex)) {
-        return nextIndex;
-      }
-      nextIndex++;
-    }
-  }
-  return -1;
-}
-
-// Get the index before the given index.
-// Takes looping and the given filterFn into account.
-function listPrevious(list, isLooping, index, filterFn) {
-  filterFn = filterFn || trueFn;
-  if (index < 0 || index >= list.length) return -1;
-
-  // Keep subtracting 1 from index, trying to find an index that passes filterFn.
-  // If we loop through *everything* and get back to our original index, return -1.
-  // We don't use recursion here because Javascript sucks at recursion.
-  var prevIndex = index - 1;
-  while ( prevIndex !== index ) {
-
-    if (prevIndex === -1) {
-      if (isLooping) prevIndex += list.length;
-      else break;
-    } else {
-      if (filterFn(list[prevIndex], prevIndex)) {
-        return prevIndex;
-      }
-      prevIndex--;
-    }
-  }
-  return -1;
-}
-
-
-// initialList may be a nodeList or an list,
-// so we don't expect it to have any list methods
-function wrapList(initialList) {
-
-  var list = initialList || [];
-  var self = {};
-  var isLooping = false;
-
-  // The Basics
-  self.items = items;
-
-  // add and remove are array-ONLY, if we're given a nodeList
-  // it's immutable
-  if (angular.isArray(list)) {
-    self.add = add;
-    self.remove = remove;
-  }
-
-  self.at = at;
-  self.count = count;
-  self.indexOf = indexOf;
-  self.isInRange = isInRange;
-  self.loop = loop;
-
-  // The Crazy Ones
-  self.delta = delta;
-  self.isRelevant = isRelevant;
-  self.previous = function(index, filterFn) {
-    return listPrevious(list, isLooping, index, filterFn);
-  };
-  self.next = function(index, filterFn) {
-    return listNext(list, isLooping, index, filterFn);
-  };
-
-  return self;
-
-  // ***************
-  // Public methods
-  // ***************
-  function items() {
-    return list;
-  }
-  function add(item, index) {
-    if (!self.isInRange(index)) index = list.length;
-    list.splice(index, 0, item);
-
-    return index;
-  }
-
-  function remove(index) {
-    if (!self.isInRange(index)) return;
-    list.splice(index, 1);
-  }
-
-  function at(index) {
-    return list[index];
-  }
-
-  function count() {
-    return list.length;
-  }
-
-  function indexOf(item) {
-    for (var i = 0, ii = list.length; i < ii; i++) {
-      if (list[i] === item) return i;
-    }
-    return -1;
-  }
-
-  function isInRange(index) {
-    return angular.isNumber(index) && index > -1 && index < list.length;
-  }
-
-  function loop(newIsLooping) {
-    if (arguments.length) {
-      isLooping = !!newIsLooping;
-    }
-    return isLooping;
-  }
-
-  function delta(fromIndex, toIndex) {
-    var difference = toIndex - fromIndex;
-    if (!isLooping) return difference;
-
-    // Is looping on? Then check for the looped difference.
-    // For example, going from the first item to the last item
-    // is actually a change of -1.
-    var loopedDifference = 0;
-    if (toIndex > fromIndex) {
-      loopedDifference = toIndex - fromIndex - self.count();
-    } else {
-      loopedDifference = self.count() - fromIndex + toIndex;
-    }
-
-    if (Math.abs(loopedDifference) < Math.abs(difference)) {
-      return loopedDifference;
-    }
-    return difference;
-  }
-
-  // Returns whether an index is 'relevant' to some index.
-  // Will return true if the index is equal to `someIndex`, the index
-  // previous of that index, or the index next of that index.
-  function isRelevant(index, someIndex) {
-    return self.isInRange(index) && (
-      index === someIndex ||
-      index === self.previous(someIndex) ||
-      index === self.next(someIndex)
-    );
-  }
-
-}
-
-})();
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 01b7d80fb2..d14a278c5d 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -598,6 +598,7 @@
   -webkit-order: $n;
   -ms-flex-order: $n;
   order: $n;
+  -webkit-box-ordinal-group: $n;
 }
 
 @mixin responsive-grid-break($selector, $max-width) {
diff --git a/scss/_slide-box.scss b/scss/_slide-box.scss
index fa2d402b25..a5bedd6eeb 100644
--- a/scss/_slide-box.scss
+++ b/scss/_slide-box.scss
@@ -6,54 +6,35 @@
 
 .slider {
   overflow: hidden;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
 }
 
 .slider-slides {
-  height: 100%;
   width: 100%;
-  position: relative;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  @include translate3d(0,0,0);
+  &.transition {
+    -webkit-transition: linear -webkit-transform;
+    transition: linear transform;
+  }
 }
 
 .slider-slide {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-
-  &[slide-state="previous"] {
-    @include translate3d(-100%, 0, 0);
-  }
-  &[slide-state="selected"] {
-    @include translate3d(0, 0, 0);
-  }
-  &[slide-state="next"] {
-    @include translate3d(100%, 0, 0);
-  }
-  &[slide-state="detached"] {
+  width: 100%;
+  height: 100%;
+  &:not([slide-display]) {
     display: none;
   }
-
-  // Only transition elements going into or out of selection.
-  &[slide-previous-state="selected"],
-  &[slide-state="selected"] {
-    transition: transform ease-out;
-    -webkit-transition: -webkit-transform ease-out;
-    @include transition-duration(inherit);
-    z-index: 1;
+  &[slide-display] {
+    display: inline-block;
   }
-  &.no-animate {
-    @include transition-duration(0ms !important);
+  &[slide-display="selected"] {
+  }
+  &[slide-display="previous"] {
+    position: absolute;
+    left: -100%;
+  }
+  &[slide-display="next"] {
+    position: absolute;
+    left: 100%;
   }
 }
 
diff --git a/test/html/slideBox.html b/test/html/slideBox.html
index 7ba34d0b86..63d6719c2d 100644
--- a/test/html/slideBox.html
+++ b/test/html/slideBox.html
@@ -51,21 +51,26 @@
         <button class="button" ng-click="$root.items.unshift($root.random())">
           unshift
         </button>
+        <button class="button" ng-click="$root.items.pop()">
+          pop
+        </button>
+        <button class="button" ng-click="$root.items.push($root.random())">
+          push
+        </button>
         <h1 class="title">Hi</h1>
-        <div class="right-buttons">
-          <button class="button" ng-click="$root.items.pop()">
-            pop
-          </button>
-          <button class="button" ng-click="$root.items.push($root.random())">
-            push
-          </button>
-        </div>
+        <button class="button" ng-click="next()">
+           next
+        </button>
+        <button class="button" ng-click="previous()">
+           previous
+        </button>
       </ion-header-bar>
       <ion-content>
           <ion-slide-box selected="$root.selectedIndex" loop="true" ng-if="$root.hasBox">
+          <ion-slide-pager></ion-slide-pager>
             <ion-slide ng-repeat="i in items">
-              <h3>item {{$index}} / {{items.length - 1}}</h3>
-              <img ng-src="http://placekitten.com/{{200 + (i%50)}}/{{200 + (i%50)}}">
+              <h3>index {{$index}} / length {{items.length}}</h3>
+              <img ng-src="http://placehold.it/{{100 + (i*10)}}x{{100 + (i*10)}}">
             </ion-slide>
 
           </ion-slide-box>
@@ -74,7 +79,7 @@
     <script>
       angular.module('slideBoxTest', ['ionic'])
 
-      .controller('SlideCtrl', function($scope, $timeout) {
+      .controller('SlideCtrl', function($scope, $timeout, $ionicSlideBoxDelegate) {
           $scope.items = $scope.$root.items = [];
           for (var i = 0; i < 10; i++) {
             $scope.items.push(i);
@@ -82,9 +87,8 @@
 
           $scope.$root.random = Math.random.bind(Math);
 
-          setTimeout(function() {
-            window.els = document.querySelector('ion-slide-box').getElementsByTagName('ion-slide');
-          });
+          $scope.next = function() { $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.next() ); };
+          $scope.previous = function() { $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.previous() ); };
       })
 
       .controller('FirstSlideCtrl', function($scope, $ionicSlideBoxDelegate) {
diff --git a/test/unit/angular/controller/slideBoxController.unit.js b/test/unit/angular/controller/slideBoxController.unit.js
deleted file mode 100644
index 4c64a4b986..0000000000
--- a/test/unit/angular/controller/slideBoxController.unit.js
+++ /dev/null
@@ -1,133 +0,0 @@
-describe('$ionSlideBox controller', function() {
-  beforeEach(module('ionic'));
-  beforeEach(function() {
-    ionic.animationFrameThrottle = function(cb) {
-      return function() {
-        cb.apply(this, arguments);
-      };
-    };
-  });
-
-
-  function mockSlide(slideBoxCtrl) {
-    var slideCtrl = {
-      setState: jasmine.createSpy('setState'),
-      transform: jasmine.createSpy('transform')
-    };
-    var slide = angular.element('<ion-slide>');
-    slide.data('$ionSlideController', slideCtrl);
-    slideBoxCtrl.element.append(slide);
-    return slideCtrl;
-  }
-  function makeCtrl(locals) {
-    var ctrl;
-    inject(function($controller, $rootScope) {
-      ctrl = $controller('$ionSlideBox', extend({
-        $scope: $rootScope.$new(),
-        $element: angular.element('<div class="slider"><div class="slider-slides"></div></div>')
-      }, locals));
-    });
-    return ctrl;
-  }
-
-  it('#onDrag()', function() {
-    var ctrl = makeCtrl();
-    var slide0 = mockSlide(ctrl);
-    var slide1 = mockSlide(ctrl);
-    var slide2 = mockSlide(ctrl);
-
-    ctrl.select(1);
-    // Transforming forward should move current and next
-    ctrl.onDrag(0.5);
-    expect(slide0.transform).not.toHaveBeenCalled();
-    expect(slide1.transform).toHaveBeenCalledWith(0.5);
-    expect(slide2.transform).toHaveBeenCalledWith(0.5);
-
-    slide0.transform.reset();
-    slide1.transform.reset();
-    slide2.transform.reset();
-
-    // Transforming backward should move current and prev
-    ctrl.onDrag(-0.5);
-    expect(slide0.transform).toHaveBeenCalledWith(-0.5);
-    expect(slide1.transform).toHaveBeenCalledWith(-0.5);
-    expect(slide2.transform).not.toHaveBeenCalled();
-  });
-
-  it('#onDragEnd()', function() {
-    var ctrl = makeCtrl();
-    var slide0 = mockSlide(ctrl);
-    var slide1 = mockSlide(ctrl);
-    var slide2 = mockSlide(ctrl);
-
-    ctrl.select(1);
-    // Greater than 0.5 should change slide
-    ctrl.onDragEnd(-0.75, 0);
-    expect(ctrl.selected()).toBe(0);
-    ctrl.onDragEnd(0.75, 0);
-    expect(ctrl.selected()).toBe(1);
-    // Less shouldn't
-    ctrl.onDragEnd(0.25, 0);
-    expect(ctrl.selected()).toBe(1);
-  });
-
-  it('#isRelevant()', function() {
-    var ctrl = makeCtrl();
-    for (var i = 0; i < 5; i++) {
-      mockSlide(ctrl);
-    }
-
-    ctrl.loop(false);
-    ctrl.select(0);
-    expect(ctrl.isRelevant(4)).toBe(false);
-    expect(ctrl.isRelevant(0)).toBe(true);
-    expect(ctrl.isRelevant(1)).toBe(true);
-    expect(ctrl.isRelevant(2)).toBe(false);
-
-    ctrl.loop(true);
-    expect(ctrl.isRelevant(3)).toBe(false);
-    expect(ctrl.isRelevant(4)).toBe(true);
-    expect(ctrl.isRelevant(0)).toBe(true);
-    expect(ctrl.isRelevant(1)).toBe(true);
-    expect(ctrl.isRelevant(2)).toBe(false);
-  });
-
-  it('#previous()', function() {
-    var ctrl = makeCtrl();
-    for (var i = 0; i < 3; i++) {
-      mockSlide(ctrl);
-    }
-
-    ctrl.loop(false);
-    ctrl.select(0);
-    expect(ctrl.previous()).toBe(-1);
-    ctrl.select(1);
-    expect(ctrl.previous()).toBe(0);
-
-    ctrl.loop(true);
-    ctrl.select(0);
-    expect(ctrl.previous()).toBe(2);
-    ctrl.select(1);
-    expect(ctrl.previous()).toBe(0);
-  });
-
-  it('#next()', function() {
-    var ctrl = makeCtrl();
-    for (var i = 0; i < 3; i++) {
-      mockSlide(ctrl);
-    }
-
-    ctrl.loop(false);
-    ctrl.select(2);
-    expect(ctrl.next()).toBe(-1);
-    ctrl.select(1);
-    expect(ctrl.next()).toBe(2);
-
-    ctrl.loop(true);
-    ctrl.select(2);
-    expect(ctrl.next()).toBe(0);
-    ctrl.select(1);
-    expect(ctrl.next()).toBe(2);
-  });
-
-});
diff --git a/test/unit/angular/controller/slideController.unit.js b/test/unit/angular/controller/slideController.unit.js
deleted file mode 100644
index 66dee8ecdb..0000000000
--- a/test/unit/angular/controller/slideController.unit.js
+++ /dev/null
@@ -1,35 +0,0 @@
-describe('$ionSlide controller', function() {
-  beforeEach(module('ionic'));
-
-  function makeCtrl() {
-    var ctrl;
-    inject(function($rootScope, $controller) {
-      ctrl = $controller('$ionSlide', {
-        $scope: $rootScope.$new(),
-        $element: angular.element('<div>')
-      });
-    });
-    return ctrl;
-  }
-
-  it('#setState()', function() {
-    var ctrl = makeCtrl();
-
-    ctrl.setState('selected');
-    expect(ctrl.element.attr('slide-state')).toBe('selected');
-    expect(ctrl.element.attr('slide-previous-state')).toBe('detached');
-
-    ctrl.setState('previous');
-    expect(ctrl.element.attr('slide-state')).toBe('previous');
-    expect(ctrl.element.attr('slide-previous-state')).toBe('selected');
-
-    ctrl.setState('detached');
-    expect(ctrl.element.attr('slide-state')).toBe('detached');
-    expect(ctrl.element.attr('slide-previous-state')).toBe('previous');
-
-    ctrl.setState('next');
-    expect(ctrl.element.attr('slide-state')).toBe('next');
-    expect(ctrl.element.attr('slide-previous-state')).toBe('detached');
-
-  });
-});
diff --git a/test/unit/angular/directive/slide.unit.js b/test/unit/angular/directive/slide.unit.js
deleted file mode 100644
index f8a74b7275..0000000000
--- a/test/unit/angular/directive/slide.unit.js
+++ /dev/null
@@ -1,23 +0,0 @@
-describe('ionSlide directive', function() {
-  beforeEach(module('ionic'));
-
-  it('should add and remove itself from parent ctrl', inject(function($compile, $rootScope, $timeout) {
-    var parent = $compile('<ion-scroll><ion-slide-box>' +
-                          '<ion-slide>Hello</ion-slide>' +
-                          '</ion-slide-box></ion-scroll>')($rootScope.$new());
-
-    $rootScope.$apply();
-    var slideBox = parent.find('ion-slide-box');
-    var slide = slideBox.find('ion-slide');
-
-    var slideBoxCtrl = slideBox.controller('ionSlideBox');
-    var slideCtrl = slide.controller('ionSlide');
-    expect(slideBoxCtrl.count()).toBe(1);
-    expect(slideBoxCtrl.at(0)).toBe(slideCtrl);
-
-    slide.remove();
-    $timeout.flush();
-    expect(slideBoxCtrl.count()).toBe(0);
-  }));
-
-});
diff --git a/test/unit/angular/directive/slideBox.unit.js b/test/unit/angular/directive/slideBox.unit.js
index 7ccced1fd2..41dee4d6f7 100644
--- a/test/unit/angular/directive/slideBox.unit.js
+++ b/test/unit/angular/directive/slideBox.unit.js
@@ -1,157 +1,358 @@
-describe('ionSlideBox directive', function() {
+describe('ionSlideBox', function() {
+
   beforeEach(module('ionic'));
   beforeEach(function() {
-    spyOn(ionic, 'requestAnimationFrame').andCallFake(function(cb) { cb(); });
+    spyOn(ionic, 'requestAnimationFrame').andCallFake(function(cb) {
+      cb();
+    });
   });
 
-  function makeSlideBox(template) {
+  function setup(attrs, children) {
     var el;
+    children = children || ['A','B','C'].map(function(content) {
+      return '  <ion-slide>' + content + '</ion-slide>';
+    }).join('\n');
+
     inject(function($compile, $rootScope) {
-      el = $compile('<ion-scroll>' + template + '</ion-scroll>')($rootScope);
+      el = $compile('<ion-slide-box '+(attrs||'')+'>' +
+                      (children||'') +
+                    '</ion-slide-box>')($rootScope.$new());
       $rootScope.$apply();
     });
-    return el.find('ion-slide-box');
+
+    return el;
   }
 
-  it('should bind .select(i) to selected attr', inject(function($rootScope, $timeout) {
-    var slideBox = makeSlideBox('<ion-slide-box selected="$root.currentIndex">' +
-                              '<ion-slide>A</ion-slide>' +
-                              '<ion-slide>B</ion-slide>' +
-                              '<ion-slide>C</ion-slide>' +
-                            '</ion-slide-box>');
+  function slides(el) {
+    return el.find('ion-slide');
+  }
+  function slideDisplays(el) {
+    var slides = el.find('ion-slide');
+    var displays = [];
+    for (var i = 0; i < slides.length; i++) {
+      displays.push( slides[i].getAttribute('slide-display') || '' );
+    }
+    return displays;
+  }
 
-    var slideBoxCtrl = slideBox.controller('ionSlideBox');
 
-    $timeout.flush();
-    expect(slideBoxCtrl.selected()).toBe(0);
-    expect($rootScope.currentIndex).toBe(0);
+  describe('directive', function() {
+    describe('selection', function() {
+      it('should select first slide automatically', inject(function($rootScope, $timeout) {
+        var el = setup('selected="$root.current"');
+        $timeout.flush();
+        expect($rootScope.current).toBe(0);
+        expect(slideDisplays(el)).toEqual(['selected', 'next', '']);
+      }));
 
-    slideBoxCtrl.select(1);
-    $timeout.flush();
-    expect($rootScope.currentIndex).toBe(1);
+      it('should pre-select slide matching binding', inject(function($rootScope, $timeout) {
+        $rootScope.current = 1;
+        var el = setup('selected="$root.current"');
+        $timeout.flush();
+        expect($rootScope.current).toBe(1);
+        expect(slideDisplays(el)).toEqual(['previous','selected', 'next']);
+      }));
 
-    // Should not select out of bounds
-    slideBoxCtrl.select(-1);
-    $timeout.verifyNoPendingTasks();
-    expect($rootScope.currentIndex).toBe(1);
+      it('should change selection to match binding', inject(function($rootScope, $timeout) {
+        var el = setup('selected="$root.current"');
+        $timeout.flush();
+        expect($rootScope.current).toBe(0);
+        $rootScope.$apply('current = 2');
+        $timeout.flush();
+        expect(slideDisplays(el)).toEqual(['', 'previous', 'selected']);
 
-    slideBoxCtrl.select(3);
-    $timeout.verifyNoPendingTasks();
-    expect(slideBoxCtrl.selected()).toBe(1);
-  }));
+        // Nothing should change for invalid index
+        $rootScope.$apply('current = 3');
+        $timeout.flush();
+        expect(slideDisplays(el)).toEqual(['', 'previous', 'selected']);
 
-  it('should bind selected attr to .select()', inject(function($rootScope, $timeout) {
-    $rootScope.$apply('current = 3; add0 = true');
-    var slideBox = makeSlideBox('<ion-slide-box selected="$root.current">' +
-                              '<ion-slide ng-if="add0">0</ion-slide>' +
-                              '<ion-slide>1</ion-slide>' +
-                              '<ion-slide>2</ion-slide>' +
-                              '<ion-slide ng-if="add3">3</ion-slide>' +
-                            '</ion-slide-box>');
-    var slideBoxCtrl = slideBox.controller('ionSlideBox');
+        // Going back to valid index should act as normal
+        $rootScope.$apply('current = 1');
+        $timeout.flush();
+        expect(slideDisplays(el)).toEqual(['previous', 'selected', 'next']);
+      }));
 
-    expect(slideBoxCtrl.selected()).toBe(-1);
-    expect($rootScope.current).toBe(3);
+      it('should change selection when slides are added', inject(function($rootScope, $timeout) {
+        var el = setup('selected="$root.current"',
+          '<ion-slide>A</ion-slide><ion-slide ng-if="B">B</ion-slide>');
+        $timeout.flush();
+        expect(slideDisplays(el)).toEqual(['selected']);
+        $rootScope.$apply('B = true');
+        expect(slideDisplays(el)).toEqual(['selected', 'next']);
+      }));
 
-    $rootScope.$apply('add3 = true');
-    expect($rootScope.current).toBe(3);
-    expect(slideBoxCtrl.selected()).toBe(3);
+      it('should change selection when slides are removed', inject(function($rootScope, $timeout) {
+        $rootScope.items = [1,2,3];
+        var el = setup('selected="$root.current"',
+          '<ion-slide ng-repeat="i in items">{{i}}</ion-slide>');
+        $timeout.flush();
+        expect(slideDisplays(el)).toEqual(['selected', 'next', '']);
+        $rootScope.$apply('items.shift()');
+        expect(slideDisplays(el)).toEqual(['selected', 'next']);
+        $rootScope.$apply('items.pop()');
+        expect(slideDisplays(el)).toEqual(['selected']);
+      }));
 
-    $rootScope.$apply('current = 1');
-    expect(slideBoxCtrl.selected()).toBe(1);
+    });
 
-    $rootScope.$apply('current = 2');
-    expect(slideBoxCtrl.selected()).toBe(2);
+    describe('loop', function() {
+      it('should reflect next/prev with loop', inject(function($rootScope, $timeout) {
+        $rootScope.shouldLoop = true;
+        var el = setup('selected="$root.current" loop="$root.shouldLoop"');
+        $timeout.flush();
+        expect(slideDisplays(el)).toEqual(['selected', 'next', 'previous']);
+      }));
+    });
 
-    $rootScope.$apply('current = 0');
-    expect(slideBoxCtrl.selected()).toBe(0);
+    describe('autoPlay', function() {
+      it('should autoPlay with attr', inject(function($rootScope, $timeout, $interval) {
+        $rootScope.play = 400;
+        var el = setup('selected="$root.current" auto-play="$root.play" loop="$root.loopy"');
+        $timeout.flush();
+        expect($rootScope.current).toBe(0);
+        $interval.flush(400); // autoplay
+        $timeout.flush(); // transition
+        expect($rootScope.current).toBe(1);
 
-    $rootScope.$apply('add0 = false');
-    expect(slideBoxCtrl.selected()).toBe(0);
+        $rootScope.$apply('play = 333');
+        $interval.flush(333); // autoplay
+        $timeout.flush(); // transition
+        expect($rootScope.current).toBe(2);
 
-    $rootScope.$apply('current = 2');
-    expect(slideBoxCtrl.selected()).toBe(2);
+        $interval.flush(333); // autoplay
+        $timeout.flush(); // transitionkkk
+        expect($rootScope.current).toBe(2);
 
-    $rootScope.$apply('add3 = false');
-    expect(slideBoxCtrl.selected()).toBe(1);
-  }));
+        $rootScope.$apply('loopy = true');
+        $interval.flush(333); // autoplay
+        $timeout.flush(); // transition
+        expect($rootScope.current).toBe(0);
 
-  it('should loop depending on attr.loop', inject(function($rootScope) {
-    var slideBox = makeSlideBox('<ion-slide-box loop="shouldLoop">' +
-                              '<ion-slide>A</ion-slide>' +
-                              '<ion-slide>B</ion-slide>' +
-                              '<ion-slide>C</ion-slide>' +
-                            '</ion-slide-box>');
+        // turn autoPlay off, no change
+        $rootScope.$apply('play = 0');
+        $interval.flush(9999);
+        $timeout.verifyNoPendingTasks(); //nothing happens
+        expect($rootScope.current).toBe(0);
+      }));
+    });
 
-    $rootScope.$apply('shouldLoop = true');
+    describe('onSlideChanged', function() {
+      it('should call when selected changes', inject(function($rootScope, $timeout) {
+        $rootScope.changed = jasmine.createSpy('changed');
+        var el = setup('selected="$root.current" on-slide-changed="changed($slideIndex)"');
+        $timeout.flush();
+        expect($rootScope.changed).toHaveBeenCalledWith(0);
 
-    var slideBoxCtrl = slideBox.controller('ionSlideBox');
-    expect(slideBoxCtrl.selected()).toBe(0);
-    slideBoxCtrl.select(slideBoxCtrl.previous());
-    expect(slideBoxCtrl.selected()).toBe(2);
-    slideBoxCtrl.select(slideBoxCtrl.next());
-    expect(slideBoxCtrl.selected()).toBe(0);
+        $rootScope.changed.reset();
+        $rootScope.$apply('current = 2');
+        $timeout.flush();
+        expect($rootScope.changed).toHaveBeenCalledWith(2);
+      }));
+    });
 
-    // Disable looping
-    $rootScope.$apply('shouldLoop = false');
+  });
 
-    // No loop at previous boundary
-    expect(slideBoxCtrl.selected()).toBe(0);
-    slideBoxCtrl.select(slideBoxCtrl.previous());
-    expect(slideBoxCtrl.selected()).toBe(0);
+  describe('delegate', function() {
 
-    // No loop at next boundary
-    slideBoxCtrl.select(2);
-    expect(slideBoxCtrl.selected()).toBe(2);
-    slideBoxCtrl.select(slideBoxCtrl.next());
-    expect(slideBoxCtrl.selected()).toBe(2);
-  }));
+    var $del;
+    beforeEach(inject(function($ionicSlideBoxDelegate) {
+      $del = $ionicSlideBoxDelegate;
+    }));
 
-  it('should autoplay depending on attr.autoPlay', inject(function($rootScope, $interval) {
-    var slideBox = makeSlideBox('<ion-slide-box loop="shouldLoop" auto-play="playInterval">' +
-                              '<ion-slide>A</ion-slide>' +
-                              '<ion-slide>B</ion-slide>' +
-                              '<ion-slide>C</ion-slide>' +
-                            '</ion-slide-box>');
+    describe('loop()', function() {
+      it('should set & get, false by default', inject(function($timeout) {
+        var el = setup();
+        $timeout.flush();
+        expect($del.loop()).toBe(false);
+        expect($del.loop(true)).toBe(true);
+        expect($del.loop()).toBe(true);
+        expect($del.loop(false)).toBe(false);
+        expect($del.loop()).toBe(false);
+      }));
+    });
 
-    $rootScope.$apply('shouldLoop = false; playInterval = 1000;');
+    describe('selected()', function() {
+      it('should return selected index', inject(function($timeout) {
+        setup();
+        $timeout.flush();
+        expect($del.selected()).toBe(0);
+        $del.select(1);
+        $timeout.flush();
+        expect($del.selected()).toBe(1);
+      }));
+    });
 
-    var slideBoxCtrl = slideBox.controller('ionSlideBox');
-    expect(slideBoxCtrl.selected()).toBe(0);
-    $interval.flush(1000);
-    expect(slideBoxCtrl.selected()).toBe(1);
-    $interval.flush(1000);
-    expect(slideBoxCtrl.selected()).toBe(2);
-    // Should not go beyond limit with loop disabled
-    $interval.flush(1000);
-    expect(slideBoxCtrl.selected()).toBe(2);
+    describe('next()', function() {
 
-    // Should loop
-    $rootScope.$apply('shouldLoop = true');
-    $interval.flush(1000);
-    expect(slideBoxCtrl.selected()).toBe(0);
+      it('without loop', inject(function($timeout) {
+        setup('selected="$root.current"');
+        $del.loop(false);
+        $timeout.flush();
+        expect($del.selected()).toBe(0);
+        expect($del.next()).toBe(1);
 
-    // Should deactivate and stop looping
-    $rootScope.$apply('playInterval = -1');
-    $interval.flush();
-    expect(slideBoxCtrl.selected()).toBe(0);
-  }));
+        $del.select(2);
+        $timeout.flush();
+        expect($del.selected()).toBe(2);
+        expect($del.next()).toBe(-1);
+      }));
 
-  it('should call onSlideChanged', inject(function($rootScope, $timeout) {
-    $rootScope.changed = jasmine.createSpy('slideChanged');
-    var el = makeSlideBox('<ion-slide-box on-slide-changed="changed($slideIndex)">' +
-                    '<ion-slide>A</ion-slide>' +
-                    '<ion-slide>B</ion-slide>' +
-                    '<ion-slide>C</ion-slide>' +
-                '</ion-slide-box>');
+      it('with loop', inject(function($timeout) {
+        setup('selected="$root.current"');
+        $del.loop(true);
+        $timeout.flush();
+        expect($del.selected()).toBe(0);
+        expect($del.next()).toBe(1);
 
-    $rootScope.$apply();
-    var slideBoxCtrl = el.controller('ionSlideBox');
-    $timeout.flush();
-    expect($rootScope.changed).toHaveBeenCalledWith(0);
+        $del.select(2);
+        $timeout.flush();
+        expect($del.selected()).toBe(2);
+        expect($del.next()).toBe(0);
+      }));
+
+    });
+
+    describe('previous()', function() {
+
+      it('without loop', inject(function($timeout) {
+        setup('selected="$root.current"');
+        $del.loop(false);
+        $timeout.flush();
+        expect($del.selected()).toBe(0);
+        expect($del.previous()).toBe(-1);
+
+        $del.select(1);
+        $timeout.flush();
+        expect($del.selected()).toBe(1);
+        expect($del.previous()).toBe(0);
+      }));
+
+      it('with loop', inject(function($timeout) {
+        setup('selected="$root.current"');
+        $del.loop(true);
+        $timeout.flush();
+        expect($del.selected()).toBe(0);
+        expect($del.previous()).toBe(2);
+
+        $del.select(1);
+        $timeout.flush();
+        expect($del.selected()).toBe(1);
+        expect($del.previous()).toBe(0);
+      }));
+
+      it('edge case of 2 slides and loop', inject(function($timeout) {
+        setup('selected="$root.current"', '<ion-slide>A</ion-slide><ion-slide>B</ion-slide>');
+        $del.loop(true);
+        $timeout.flush();
+        expect($del.selected()).toBe(0);
+        expect($del.previous()).toBe(-1);
+
+        $del.select(1);
+        $timeout.flush();
+        expect($del.selected()).toBe(1);
+        expect($del.previous()).toBe(0);
+      }));
+
+    });
+
+    describe('count()', function() {
+
+      it('should change with slides', inject(function($timeout, $rootScope) {
+        $rootScope.items = [1,2,3];
+        setup('','<ion-slide ng-repeat="i in items"></ion-slide>');
+        $timeout.flush();
+        expect($del.count()).toBe(3);
+        $rootScope.$apply('items.pop()');
+        expect($del.count()).toBe(2);
+        $rootScope.$apply('items.unshift(0)');
+        expect($del.count()).toBe(3);
+      }));
+
+    });
+
+    describe('autoPlay()', function() {
+
+      it('should start/stop', inject(function($timeout, $interval) {
+        var el = setup();
+        $del.autoPlay(100);
+        $timeout.flush();
+        expect($del.selected()).toBe(0);
+        $interval.flush(100); // autoplay
+        $timeout.flush(); // transition
+        expect($del.selected()).toBe(1);
+
+        $del.autoPlay(150);
+        $interval.flush(150); // autoplay
+        $timeout.flush(); // transition
+        expect($del.selected()).toBe(2);
+
+        $interval.flush(150); // autoplay
+        $timeout.flush(); // transition
+        expect($del.selected()).toBe(2); //boundary
+
+        $del.loop(true);
+        $interval.flush(150); // autoplay
+        $timeout.flush(); // transition
+        expect($del.selected()).toBe(0);
+
+        // turn autoPlay off, no change
+        $del.autoPlay(0);
+        $interval.flush(9999);
+        $timeout.flush();
+        expect($del.selected()).toBe(0);
+      }));
+
+    });
+
+    describe('select()', function() {
+      it('basic', inject(function($timeout, $rootScope) {
+        var el = setup('selected="$root.current"');
+        $timeout.flush();
+        expect($rootScope.current).toBe(0);
+
+        $del.select(2);
+        $timeout.flush();
+        expect($rootScope.current).toBe(2);
+        expect(slideDisplays(el)).toEqual(['', 'previous', 'selected']);
+
+        $del.loop(true);
+        $del.select(0);
+        $timeout.flush();
+        expect($rootScope.current).toBe(0);
+        expect(slideDisplays(el)).toEqual(['selected', 'next', 'previous']);
+      }));
+
+      it('when queueing, should only publish after final slide', inject(function($timeout, $rootScope) {
+        $rootScope.changed = jasmine.createSpy('changed');
+        var el = setup('selected="$root.current" on-slide-changed="$root.changed($slideIndex)"');
+        $timeout.flush();
+        $rootScope.changed.reset();
+
+        $del.select(1);
+        $del.select(2);
+        $del.select(1);
+
+        $timeout.flush();
+        // Scope data bindings not published
+        expect($rootScope.changed).not.toHaveBeenCalled();
+        expect($rootScope.current).toBe(0);
+        // Elements look different, though.
+        expect(slideDisplays(el)).toEqual(['previous', 'selected', 'next']);
+
+        $timeout.flush();
+        expect($rootScope.changed).not.toHaveBeenCalled();
+        expect($rootScope.current).toBe(0);
+        expect(slideDisplays(el)).toEqual(['', 'previous', 'selected']);
+
+        $timeout.flush();
+        expect($rootScope.changed).toHaveBeenCalledWith(1);
+        expect($rootScope.current).toBe(1);
+        expect(slideDisplays(el)).toEqual(['previous', 'selected', 'next']);
+      }));
+
+    });
+
+  });
 
-    slideBoxCtrl.select(1);
-    $rootScope.$apply();
-    expect($rootScope.changed).toHaveBeenCalledWith(1);
-  }));
 });
+
diff --git a/test/unit/angular/directive/slidePager.unit.js b/test/unit/angular/directive/slidePager.unit.js
index 003d1df370..02505cff67 100644
--- a/test/unit/angular/directive/slidePager.unit.js
+++ b/test/unit/angular/directive/slidePager.unit.js
@@ -1,9 +1,7 @@
 describe('<ion-slide-pager> directive', function() {
-  beforeEach(module('ionic'));
+  beforeEach(module('ionic', 'ngAnimateMock'));
   beforeEach(function() {
-    ionic.animationFrameThrottle = function(cb) {
-      return function() { cb.apply(this, arguments); };
-    };
+    spyOn(ionic, 'requestAnimationFrame').andCallFake(function(cb) { cb(); });
   });
 
   it('should create pager elements', inject(function($compile, $rootScope, $timeout) {
@@ -15,6 +13,7 @@ describe('<ion-slide-pager> directive', function() {
                       '</ion-slide-box>')($rootScope);
     $rootScope.$apply();
     var pager = el.find('ion-slide-pager');
+    var slideBoxCtrl = el.controller('ionSlideBox');
 
     expect(pager.find('.slider-pager-page').length).toBe(2);
 
@@ -22,10 +21,7 @@ describe('<ion-slide-pager> directive', function() {
     expect(pager.find('.slider-pager-page').length).toBe(3);
 
     $rootScope.$apply('showThird = false');
-    $timeout.flush();
-    $rootScope.$apply();
     expect(pager.find('.slider-pager-page').length).toBe(2);
-
   }));
 
   it('should by default select on click', inject(function($compile, $rootScope, $timeout) {
@@ -36,14 +32,16 @@ describe('<ion-slide-pager> directive', function() {
                         '<ion-slide-pager></ion-slide-pager>' +
                       '</ion-slide-box>')($rootScope);
     $rootScope.$apply();
+    $timeout.flush();
     var slideBoxCtrl = el.controller('ionSlideBox');
     var pagers = el.find('.slider-pager-page');
 
     expect(slideBoxCtrl.selected()).toBe(0);
     pagers.eq(1).click();
+    $timeout.flush();
     expect(slideBoxCtrl.selected()).toBe(1);
-
     pagers.eq(2).click();
+    $timeout.flush();
     expect(slideBoxCtrl.selected()).toBe(2);
 
   }));
diff --git a/test/unit/utils/list.unit.js b/test/unit/utils/list.unit.js
deleted file mode 100644
index d1d2f483eb..0000000000
--- a/test/unit/utils/list.unit.js
+++ /dev/null
@@ -1,141 +0,0 @@
-describe('ionic.Utils.list', function() {
-  function isEven(item, n) { return n % 2 === 0; }
-
-  it('#items()', function() {
-    var array = [1,2,3];
-    expect(ionic.Utils.list(array).items()).toBe(array);
-  });
-
-  it('#add(item[, index])', function() {
-    var list = ionic.Utils.list();
-    expect(list.count()).toBe(0);
-    list.add('a');
-    expect(list.items()).toEqual(['a']);
-    list.add('b', 0);
-    expect(list.items()).toEqual(['b','a']);
-  });
-
-  it('#remove(index)', function() {
-    var list = ionic.Utils.list(['a','b','c']);
-    list.remove(3);
-    expect(list.items()).toEqual(['a','b','c']);
-    list.remove(1);
-    expect(list.items()).toEqual(['a','c']);
-    list.remove(-1);
-    expect(list.items()).toEqual(['a','c']);
-    list.remove(0);
-    expect(list.items()).toEqual(['c']);
-  });
-
-  it('#at(index)', function() {
-    var list = ionic.Utils.list(['a','b']);
-    expect(list.at(-1)).toBeFalsy();
-    expect(list.at(0)).toBe('a');
-    expect(list.at(1)).toBe('b');
-    expect(list.at(2)).toBeFalsy();
-  });
-
-  it('#count()', function() {
-    var list = ionic.Utils.list(['a']);
-    expect(list.count()).toBe(1);
-    list.add('b');
-    expect(list.count()).toBe(2);
-  });
-
-  it('#indexOf(item)', function() {
-    var list = ionic.Utils.list(['a','b','c']);
-    expect(list.indexOf('b')).toBe(1);
-    expect(list.indexOf('c')).toBe(2);
-    expect(list.indexOf('d')).toBe(-1);
-  });
-
-  it('#isInRange(index)', function() {
-    var list = ionic.Utils.list(['a','b']);
-    expect(list.isInRange(-1)).toBe(false);
-    expect(list.isInRange(0)).toBe(true);
-    expect(list.isInRange(1)).toBe(true);
-    expect(list.isInRange(2)).toBe(false);
-  });
-
-  it('#loop([newLoop]', function() {
-    var list = ionic.Utils.list();
-    expect(list.loop()).toBe(false);
-    list.loop(true);
-    expect(list.loop()).toBe(true);
-    list.loop(false);
-    expect(list.loop()).toBe(false);
-  });
-
-  it('#delta(from, to), loop = false', function() {
-    var list = ionic.Utils.list(['a','b','c']);
-    expect(list.delta(0, 1)).toBe(1);
-    expect(list.delta(0, 2)).toBe(2);
-    expect(list.delta(2, 1)).toBe(-1);
-    expect(list.delta(2, 0)).toBe(-2);
-  });
-
-  it('#delta(from, to), loop = true', function() {
-    var list = ionic.Utils.list(['a','b','c']);
-    list.loop(true);
-    expect(list.delta(0, 1)).toBe(1);
-    expect(list.delta(0, 2)).toBe(-1);
-    expect(list.delta(2, 1)).toBe(-1);
-    expect(list.delta(2, 0)).toBe(1);
-  });
-
-  it('#isRelevant(index, toOtherIndex)', function() {
-    var list = ionic.Utils.list(['a','b','c','d','e']);
-    expect(list.isRelevant(0, 2)).toBe(false);
-    expect(list.isRelevant(1, 2)).toBe(true);
-    expect(list.isRelevant(2, 2)).toBe(true);
-    expect(list.isRelevant(3, 2)).toBe(true);
-    expect(list.isRelevant(4, 2)).toBe(false);
-
-    expect(list.isRelevant(-1, -1)).toBe(false);
-  });
-
-  it('#next(fromIndex, filterFn), loop = false', function() {
-    var list = ionic.Utils.list(['a','b','c']);
-    expect(list.next(0, isEven)).toBe(2);
-    expect(list.next(1, isEven)).toBe(2);
-    expect(list.next(2, isEven)).toBe(-1);
-  });
-
-  it('#next(fromIndex, filterFn), loop = true', function() {
-    var list = ionic.Utils.list(['a','b','c']);
-    list.loop(true);
-    expect(list.next(0, isEven)).toBe(2);
-    expect(list.next(1, isEven)).toBe(2);
-    expect(list.next(2, isEven)).toBe(0);
-  });
-
-  it('#next(fromIndex, filterFn), nothing available, loop = true', function() {
-    var list = ionic.Utils.list(['a','b','c']);
-    var falseFn = function() { return false; };
-    list.loop(true);
-    expect(list.next(0, falseFn)).toBe(-1);
-  });
-
-  it('#previous(fromIndex, filterFn), loop = false', function() {
-    var list = ionic.Utils.list(['a','b','c']);
-    expect(list.previous(0, isEven)).toBe(-1);
-    expect(list.previous(1, isEven)).toBe(0);
-    expect(list.previous(2, isEven)).toBe(0);
-  });
-
-  it('#previous(fromIndex, filterFn), loop = true', function() {
-    var list = ionic.Utils.list(['a','b','c']);
-    list.loop(true);
-    expect(list.previous(0, isEven)).toBe(2);
-    expect(list.previous(1, isEven)).toBe(0);
-    expect(list.previous(2, isEven)).toBe(0);
-  });
-
-  it('#previous(fromIndex, filterFn), nothing available, loop = true', function() {
-    var list = ionic.Utils.list(['a','b','c']);
-    var falseFn = function() { return false; };
-    list.loop(true);
-    expect(list.previous(0, falseFn)).toBe(-1);
-  });
-
-});