diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index ca4f0e701d..3b11d169ab 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2601,9 +2601,6 @@ body, .ionic-body {
   -moz-transform-origin: left top;
   transform-origin: left top;
   -webkit-backface-visibility: hidden; }
-  .scroll.scroll-paging {
-    white-space: nowrap;
-    font-size: 0; }
 
 .scroll-bar {
   position: absolute;
@@ -4415,9 +4412,7 @@ button.item-button-right:after {
   background-color: #000; }
 
 .slider-slides {
-  position: relative;
-  white-space: nowrap;
-  font-size: 0; }
+  position: relative; }
 
 .slider-slide {
   display: block;
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 0873afad78..f70331865f 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -541,6 +541,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
       });
 
       $scope.$watch('rightButtons', function(val) {
+        console.log('Right buttons changed');
         // Resize the title since the buttons have changed
         hb.align();
       });
@@ -1816,7 +1817,10 @@ angular.module('ionic.ui.slideBox', [])
     restrict: 'E',
     replace: true,
     transclude: true,
-    scope: {},
+    scope: {
+      showPager: '@',
+      onSlideChanged: '&'
+    },
     controller: ['$scope', '$element', function($scope, $element) {
       var _this = this;
 
@@ -1824,10 +1828,13 @@ angular.module('ionic.ui.slideBox', [])
         el: $element[0],
         slidesChanged: function() {
           $scope.currentSlide = slider.getPos();
+
+          // Occasionally we need to trigger a digest
           $timeout(function() {});
         },
         callback: function(slideIndex) {
           $scope.currentSlide = slideIndex;
+          $scope.onSlideChanged({index:$scope.currentSlide});
           $scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
           $scope.$apply();
         }
@@ -1847,7 +1854,7 @@ angular.module('ionic.ui.slideBox', [])
 
     link: function($scope, $element, $attr, slideBoxCtrl) {
       // If the pager should show, append it to the slide box
-      if($attr.showPager !== "false") {
+      if($scope.$eval($scope.showPager) !== false) {
         var childScope = $scope.$new();
         var pager = angular.element('<pager></pager>');
         $element.append(pager);
diff --git a/js/ext/angular/src/directive/ionicBar.js b/js/ext/angular/src/directive/ionicBar.js
index f9b456cb0e..cf63406b27 100644
--- a/js/ext/angular/src/directive/ionicBar.js
+++ b/js/ext/angular/src/directive/ionicBar.js
@@ -45,6 +45,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
       });
 
       $scope.$watch('rightButtons', function(val) {
+        console.log('Right buttons changed');
         // Resize the title since the buttons have changed
         hb.align();
       });
diff --git a/js/ext/angular/src/directive/ionicSlideBox.js b/js/ext/angular/src/directive/ionicSlideBox.js
index 6e694f957c..acf98705a3 100644
--- a/js/ext/angular/src/directive/ionicSlideBox.js
+++ b/js/ext/angular/src/directive/ionicSlideBox.js
@@ -20,7 +20,10 @@ angular.module('ionic.ui.slideBox', [])
     restrict: 'E',
     replace: true,
     transclude: true,
-    scope: {},
+    scope: {
+      showPager: '@',
+      onSlideChanged: '&'
+    },
     controller: ['$scope', '$element', function($scope, $element) {
       var _this = this;
 
@@ -28,10 +31,13 @@ angular.module('ionic.ui.slideBox', [])
         el: $element[0],
         slidesChanged: function() {
           $scope.currentSlide = slider.getPos();
+
+          // Occasionally we need to trigger a digest
           $timeout(function() {});
         },
         callback: function(slideIndex) {
           $scope.currentSlide = slideIndex;
+          $scope.onSlideChanged({index:$scope.currentSlide});
           $scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
           $scope.$apply();
         }
@@ -51,7 +57,7 @@ angular.module('ionic.ui.slideBox', [])
 
     link: function($scope, $element, $attr, slideBoxCtrl) {
       // If the pager should show, append it to the slide box
-      if($attr.showPager !== "false") {
+      if($scope.$eval($scope.showPager) !== false) {
         var childScope = $scope.$new();
         var pager = angular.element('<pager></pager>');
         $element.append(pager);
diff --git a/js/ext/angular/test/list.html b/js/ext/angular/test/list.html
index 6902e0b960..a7c1feee78 100644
--- a/js/ext/angular/test/list.html
+++ b/js/ext/angular/test/list.html
@@ -6,7 +6,40 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/angular/angular.js"></script>
+    <script src="../../../../dist/js/angular/angular-animate.js"></script>
+    <script src="../../../../dist/js/angular/angular-route.js"></script>
+    <script src="../../../../dist/js/angular/angular-touch.js"></script>
+    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
     <style>
+      .box {
+        width: 100%;
+        height: 50px;
+        color: #fff;
+      }
+      .box h1 {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        margin-top: -50px;
+
+        color: #fff;
+
+        font-size: 60px;
+        text-align: center;
+        font-weight: bold;
+      }
+      .blue {
+        background-color: rgb(71, 138, 238);
+      }
+      .yellow {
+        background-color: rgb(233, 233, 109);
+      }
+      .pink {
+        background-color: rgb(233, 109, 233);
+      }
       .my-repeat-animation > .ng-enter, 
       .my-repeat-animation > .ng-leave, 
       .my-repeat-animation > .ng-move {
@@ -124,6 +157,23 @@
             <i class="icon {{ item.icon }}"></i>
             {{ item.text }}
           </a>
+          <div class="item">
+            <slide-box show-pager="false">
+              <slide>
+                <div class="box blue">
+                  <h1>BLUE {{slideBox.slideIndex}}</h1>
+                </div>
+              </slide>
+              <slide>
+                <div class="box yellow">
+                  <h1>YELLOW {{slideBox.slideIndex}}</h1>
+                </div>
+              </slide>
+              <slide>
+                <div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>
+              </slide>
+            </slide-box>
+          </div>
 
         </list>
 
@@ -131,15 +181,8 @@
 
     </pane>
 
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/angular/angular.js"></script>
-    <script src="../../../../dist/js/angular/angular-animate.js"></script>
-    <script src="../../../../dist/js/angular/angular-route.js"></script>
-    <script src="../../../../dist/js/angular/angular-touch.js"></script>
-    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
-      angular.module('navTest', ['ionic.ui.list', 'ionic.ui.content'])
+      angular.module('navTest', ['ionic'])
 
       .controller('TestCtrl', function($scope, $timeout) {
 
diff --git a/js/ext/angular/test/slideBox.html b/js/ext/angular/test/slideBox.html
index 703fe0cca1..a672e54237 100644
--- a/js/ext/angular/test/slideBox.html
+++ b/js/ext/angular/test/slideBox.html
@@ -17,19 +17,14 @@
       .box {
         width: 100%;
         height: 100%;
-        color: #fff;
-      }
-      .box h1 {
-        position: absolute;
-        top: 50%;
-        width: 100%;
-        margin-top: -50px;
-
-        color: #fff;
-
-        font-size: 60px;
+        padding-top: 80px;
+        color: #000;
+        background-color: #fff;
         text-align: center;
-        font-weight: bold;
+      }
+      .box > * {
+        font-weight: 100;
+        font-family: 'Helvetica Neue';
       }
       .blue {
         background-color: rgb(71, 138, 238);
@@ -40,24 +35,34 @@
       .pink {
         background-color: rgb(233, 109, 233);
       }
+      .slider-pager .slider-pager-page {
+        color: #000;
+      }
     </style>
   </head>
   <body>
 
     <div ng-controller="SlideCtrl">
-      <slide-box>
+      <header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
+      <slide-box on-slide-changed="slideChanged(index)">
         <slide>
-          <div class="box blue">
-            <h1>BLUE {{slideBox.slideIndex}}</h1>
+          <div class="box">
+            <h3>Thank you for choosing my app!</h3>
+            <p>
+              We've worked super hard to make you happy.
+            </p>
+            <p>
+              But if you are angry, please contact us at support@example.com
+            </p>
           </div>
         </slide>
         <slide>
-          <div class="box yellow">
-            <h1>YELLOW {{slideBox.slideIndex}}</h1>
+          <div class="box">
           </div>
         </slide>
         <slide>
-          <div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>
+          <div class="box">
+          </div>
         </slide>
       </slide-box>
     </div>
@@ -65,12 +70,37 @@
       angular.module('slideBoxTest', ['ionic'])
 
       .controller('SlideCtrl', function($scope) {
-        $scope.onScroll = function(top, left) {
-          console.log('On scroll', top, left, $scope.scrollView.__maxScrollLeft);
-        };
-        $scope.$on('slideBox.slideChanged', function(e, index) {
+        $scope.leftButtons = [
+          {
+            content: 'Skip',
+            type: 'button-positive button-clear',
+            onTap: function(e) {
+            }
+          }
+        ];
+        $scope.slideChanged = function(index) {
           console.log('Slide changed', index);
-        });
+          if(index == 2) {
+            $scope.rightButtons = [
+              {
+                content: 'Start using MyApp',
+                type: 'button-positive button-clear',
+                onTap: function(e) {
+                }
+              }
+            ];
+          } else {
+            $scope.rightButtons = [
+              {
+                content: 'Next',
+                type: 'button-positive button-clear',
+                onTap: function(e) {
+                }
+              }
+            ];
+          }
+          $scope.$apply();
+        };
       });
     </script>
   </body>
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index 26581cf98f..7743d8041b 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -100,11 +100,6 @@ body, .ionic-body {
   @include transform-origin(left, top);
   //-webkit-perspective: 1000;
   -webkit-backface-visibility: hidden;
-
-  &.scroll-paging {
-    white-space: nowrap;
-    font-size: 0;
-  }
 }
 
 // Scroll bar styles
diff --git a/scss/_slide-box.scss b/scss/_slide-box.scss
index 1b7675a127..1c38f222e7 100644
--- a/scss/_slide-box.scss
+++ b/scss/_slide-box.scss
@@ -13,8 +13,6 @@
 }
 .slider-slides {
   position: relative;
-  white-space: nowrap;
-  font-size: 0; // Remove the gaps between slide content items
 }
 
 .slider-slide {