From 2ea66ecfb3cf9afcbd0466851350b6110df3ce2a Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Mon, 18 Nov 2013 18:05:21 -0600
Subject: [PATCH 01/10] Initial working version of router based nav controller

---
 dist/js/ionic-angular.js                      | 131 ++++++++++++++++++
 .../angular/src/directive/ionicNavRouter.js   | 128 +++++++++++++++++
 js/ext/angular/src/ionicAngular.js            |   2 +
 js/ext/angular/test/navRouter.html            | 119 ++++++++++++++++
 4 files changed, 380 insertions(+)
 create mode 100644 js/ext/angular/src/directive/ionicNavRouter.js
 create mode 100644 js/ext/angular/test/navRouter.html

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index d5036b6d33..482591b3cf 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -23942,6 +23942,7 @@ angular.module('ionic.ui', [
                             'ionic.ui.content',
                             'ionic.ui.tabs',
                             'ionic.ui.nav',
+                            'ionic.ui.navRouter',
                             'ionic.ui.header',
                             'ionic.ui.sideMenu',
                             'ionic.ui.slideBox',
@@ -23957,6 +23958,7 @@ angular.module('ionic', [
     
     // Angular deps
     'ngAnimate',
+    'ngRoute',
     'ngTouch',
     'ngSanitize'
 ]);
@@ -25254,6 +25256,135 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
   }
 })
 
+})();
+;
+(function() {
+'use strict';
+
+/**
+ * @description
+ * The NavController is a navigation stack View Controller modelled off of 
+ * UINavigationController from Cocoa Touch. With the Nav Controller, you can
+ * "push" new "pages" on to the navigation stack, and then pop them off to go
+ * back. The NavController controls a navigation bar with a back button and title
+ * which updates as the pages switch.
+ *
+ * The NavController makes sure to not recycle scopes of old pages
+ * so that a pop will still show the same state that the user left.
+ *
+ * However, once a page is popped, its scope is destroyed and will have to be
+ * recreated then next time it is pushed.
+ *
+ */
+
+var actualLocation = null;
+
+angular.module('ionic.ui.navRouter', [])
+
+.run(['$rootScope', function($rootScope) {
+  $rootScope.stackCursorPosition = 0;
+}])
+
+.directive('navRouter', ['$rootScope', '$location', '$window', '$route', function($rootScope, $location, $window, $route) {
+  return {
+    restrict: 'AC',
+    link: function($scope, $element, $attr) {
+      $scope.animation = $attr.animation;
+
+      $element.addClass($scope.animation);
+
+      $scope.isReverse = false;
+
+
+      var reverseTransition = ionic.throttle(function() {
+        console.log('REVERSE');
+        $element.removeClass($scope.animation);
+        $element.addClass($scope.animation + '-reverse');
+      }, 1000, {
+      })
+
+      var forwardTransition = ionic.throttle(function() {
+        console.log('FORWARD');
+        $element.removeClass($scope.animation + '-reverse');
+        $element.addClass($scope.animation);
+      }, 1000, {
+      });
+
+      $scope.$on('$routeChangeSuccess', function(e, a) {
+        console.log('ROUTE CHANGED', a, e);
+      });
+      $scope.$on('$routeChangeStart', function(e, a) {
+        console.log('ROUTE START', a, e);
+        var back, historyState = $window.history.state;
+
+        back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
+        if(back) {
+          reverseTransition();
+        } else {
+          forwardTransition();
+        }
+      });
+
+      $scope.$on('$locationChangeSuccess', function() {
+        // Store the new location
+        console.log('LOCATION CHANGE SUCCESS');
+        $rootScope.actualLocation = $location.path();
+      });  
+
+
+      // Keep track of location changes and update a stack pointer that tracks whether we are
+      // going forwards or back
+      $scope.$watch(function () { return $location.path() }, function (newLocation, oldLocation) {
+        if($rootScope.actualLocation === newLocation) {
+
+          var back, historyState = $window.history.state;
+
+          back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
+
+          if (back) {
+            //back button
+            $rootScope.stackCursorPosition--;
+          } else {
+            //forward button
+            $rootScope.stackCursorPosition++;
+          }
+
+        } else {
+          var currentRouteBeforeChange = $route.current;
+
+          if (currentRouteBeforeChange) {
+
+            $window.history.replaceState({
+              position: $rootScope.stackCursorPosition
+            });
+
+            $rootScope.stackCursorPosition++;
+          }
+        }
+      });
+    }
+  }
+}])
+
+.directive('navBack', ['$window', function($window) {
+  return {
+    restrict: 'AC',
+    require: '^?navRouter',
+    link: function($scope, $element, $attr, navCtrl) {
+      var goBack = function() {
+        $window.history.back();
+      };
+      $element.bind('tap', goBack);
+      $element.bind('click', goBack);
+
+      $scope.$on('$destroy', function() {
+        $element.unbind('tap', goBack);
+        $element.unbind('click', goBack);
+      });
+    }
+  }
+}]);
+
 })();
 ;
 (function(ionic) {
diff --git a/js/ext/angular/src/directive/ionicNavRouter.js b/js/ext/angular/src/directive/ionicNavRouter.js
new file mode 100644
index 0000000000..6dccc86b41
--- /dev/null
+++ b/js/ext/angular/src/directive/ionicNavRouter.js
@@ -0,0 +1,128 @@
+(function() {
+'use strict';
+
+/**
+ * @description
+ * The NavController is a navigation stack View Controller modelled off of 
+ * UINavigationController from Cocoa Touch. With the Nav Controller, you can
+ * "push" new "pages" on to the navigation stack, and then pop them off to go
+ * back. The NavController controls a navigation bar with a back button and title
+ * which updates as the pages switch.
+ *
+ * The NavController makes sure to not recycle scopes of old pages
+ * so that a pop will still show the same state that the user left.
+ *
+ * However, once a page is popped, its scope is destroyed and will have to be
+ * recreated then next time it is pushed.
+ *
+ */
+
+var actualLocation = null;
+
+angular.module('ionic.ui.navRouter', [])
+
+.run(['$rootScope', function($rootScope) {
+  $rootScope.stackCursorPosition = 0;
+}])
+
+.directive('navRouter', ['$rootScope', '$location', '$window', '$route', function($rootScope, $location, $window, $route) {
+  return {
+    restrict: 'AC',
+    link: function($scope, $element, $attr) {
+      $scope.animation = $attr.animation;
+
+      $element.addClass($scope.animation);
+
+      $scope.isReverse = false;
+
+
+      var reverseTransition = ionic.throttle(function() {
+        console.log('REVERSE');
+        $element.removeClass($scope.animation);
+        $element.addClass($scope.animation + '-reverse');
+      }, 1000, {
+      })
+
+      var forwardTransition = ionic.throttle(function() {
+        console.log('FORWARD');
+        $element.removeClass($scope.animation + '-reverse');
+        $element.addClass($scope.animation);
+      }, 1000, {
+      });
+
+      $scope.$on('$routeChangeSuccess', function(e, a) {
+        console.log('ROUTE CHANGED', a, e);
+      });
+      $scope.$on('$routeChangeStart', function(e, a) {
+        console.log('ROUTE START', a, e);
+        var back, historyState = $window.history.state;
+
+        back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
+        if(back) {
+          reverseTransition();
+        } else {
+          forwardTransition();
+        }
+      });
+
+      $scope.$on('$locationChangeSuccess', function() {
+        // Store the new location
+        console.log('LOCATION CHANGE SUCCESS');
+        $rootScope.actualLocation = $location.path();
+      });  
+
+
+      // Keep track of location changes and update a stack pointer that tracks whether we are
+      // going forwards or back
+      $scope.$watch(function () { return $location.path() }, function (newLocation, oldLocation) {
+        if($rootScope.actualLocation === newLocation) {
+
+          var back, historyState = $window.history.state;
+
+          back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
+
+          if (back) {
+            //back button
+            $rootScope.stackCursorPosition--;
+          } else {
+            //forward button
+            $rootScope.stackCursorPosition++;
+          }
+
+        } else {
+          var currentRouteBeforeChange = $route.current;
+
+          if (currentRouteBeforeChange) {
+
+            $window.history.replaceState({
+              position: $rootScope.stackCursorPosition
+            });
+
+            $rootScope.stackCursorPosition++;
+          }
+        }
+      });
+    }
+  }
+}])
+
+.directive('navBack', ['$window', function($window) {
+  return {
+    restrict: 'AC',
+    require: '^?navRouter',
+    link: function($scope, $element, $attr, navCtrl) {
+      var goBack = function() {
+        $window.history.back();
+      };
+      $element.bind('tap', goBack);
+      $element.bind('click', goBack);
+
+      $scope.$on('$destroy', function() {
+        $element.unbind('tap', goBack);
+        $element.unbind('click', goBack);
+      });
+    }
+  }
+}]);
+
+})();
diff --git a/js/ext/angular/src/ionicAngular.js b/js/ext/angular/src/ionicAngular.js
index 6cc73e061e..13d3326d68 100644
--- a/js/ext/angular/src/ionicAngular.js
+++ b/js/ext/angular/src/ionicAngular.js
@@ -16,6 +16,7 @@ angular.module('ionic.ui', [
                             'ionic.ui.content',
                             'ionic.ui.tabs',
                             'ionic.ui.nav',
+                            'ionic.ui.navRouter',
                             'ionic.ui.header',
                             'ionic.ui.sideMenu',
                             'ionic.ui.slideBox',
@@ -31,6 +32,7 @@ angular.module('ionic', [
     
     // Angular deps
     'ngAnimate',
+    'ngRoute',
     'ngTouch',
     'ngSanitize'
 ]);
diff --git a/js/ext/angular/test/navRouter.html b/js/ext/angular/test/navRouter.html
new file mode 100644
index 0000000000..57be3332dd
--- /dev/null
+++ b/js/ext/angular/test/navRouter.html
@@ -0,0 +1,119 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Nav Bars</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <style>
+.view-animate > .ng-enter, .view-animate > .ng-leave {
+  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+ 
+  display:block;
+  width:100%;
+  border-left:1px solid black;
+ 
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  padding:10px;
+}
+ 
+.view-animate > .ng-enter {
+      -webkit-transform: translate3d(100%, 0, 0);
+    }
+    .view-animate > .ng-enter.ng-enter-active {
+      -webkit-transform: translate3d(0, 0, 0);
+    }
+    .view-animate > .ng-leave.ng-leave-active {
+      -webkit-transform: translate3d(-100%, 0, 0);
+    }
+    .view-animate-reverse > .ng-enter, .view-animate-reverse > .ng-leave {
+      -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+     
+      display:block;
+      width:100%;
+      border-left:1px solid black;
+     
+      position:absolute;
+      top:0;
+      left:0;
+      right:0;
+      bottom:0;
+      padding:10px;
+    }
+     
+    .view-animate-reverse > .ng-enter {
+      -webkit-transform: translate3d(-100%, 0, 0);
+    }
+    .view-animate-reverse > .ng-enter.ng-enter-active {
+      -webkit-transform: translate3d(0%, 0, 0);
+    }
+    .view-animate-reverse > .ng-leave.ng-leave-active {
+      -webkit-transform: translate3d(100%, 0, 0);
+    }
+
+    </style>
+  </head>
+  <body>
+    <pane nav-router animation="view-animate">
+      <ng-view></ng-view>
+    </pane>
+
+    <script id="page1.html" type="text/ng-template">
+      <pane>
+        <h1>Page 1</h1>
+        <a class="button button-pure" nav-back>Back</a>
+        <a class="button button-assertive" href="#/page2">Next</a>
+      </pane>
+    </script>
+    <script id="page2.html" type="text/ng-template">
+      <pane>
+        <h1>Page 2</h1>
+        <a class="button button-pure" nav-back>Back</a>
+        <a class="button button-assertive" href="#/page3">Next</a>
+      </pane>
+    </script>
+    <script id="page3.html" type="text/ng-template">
+      <pane>
+        <h1>Page 3</h1>
+        <a class="button button-pure" nav-back>Back</a>
+      </pane>
+    </script>
+    <script>
+      angular.module('navTest', ['ionic'])
+
+
+      .config(function($routeProvider, $locationProvider) {
+        $routeProvider.when('/page1', {
+          templateUrl: 'page1.html',
+        });
+
+        $routeProvider.when('/page2', {
+          templateUrl: 'page2.html',
+        });
+
+        $routeProvider.when('/page3', {
+          templateUrl: 'page3.html',
+        });
+        $routeProvider.otherwise({
+          redirectTo: '/page1'
+        });
+
+        // configure html5 to get links working on jsfiddle
+        //$locationProvider.html5Mode(true);
+
+      });
+
+      
+    </script>
+  </body>
+</html>

From 78a16a9af1841acdf4b78e1934a6a7563427247d Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Mon, 18 Nov 2013 18:36:00 -0600
Subject: [PATCH 02/10] Better slide animation

---
 dist/css/ionic.css                            | 30 ++++++++++
 dist/js/ionic-angular.js                      | 29 ++++++----
 .../angular/src/directive/ionicNavRouter.js   | 29 ++++++----
 js/ext/angular/test/navRouter.html            | 55 +------------------
 scss/_animations.scss                         | 42 ++++++++++++++
 5 files changed, 109 insertions(+), 76 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index e0b0238d96..e74a6c0074 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2911,6 +2911,36 @@ a.button {
  * and pretty easy on performance. They can be overidden
  * and enhanced easily.
  */
+.slide-left-right > .ng-enter, .slide-left-right.ng-enter, .slide-left-right > .ng-leave, .slide-left-right.ng-leave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms; }
+.slide-left-right > .ng-enter, .slide-left-right.ng-enter {
+  -webkit-transform: translate3d(100%, 0, 0); }
+.slide-left-right > .ng-enter.ng-enter-active, .slide-left-right.ng-enter.ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.slide-left-right > .ng-leave.ng-leave-active, .slide-left-right.ng-leave.ng-leave-active {
+  -webkit-transform: translate3d(-100%, 0, 0); }
+
+.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter, .slide-left-right-reverse > .ng-leave, .slide-left-right-reverse.ng-leave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms; }
+.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter {
+  -webkit-transform: translate3d(-100%, 0, 0); }
+.slide-left-right-reverse > .ng-enter.ng-enter-active, .slide-left-right-reverse.ng-enter.ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.slide-left-right-reverse > .ng-leave.ng-leave-active, .slide-left-right-reverse.ng-leave.ng-leave-active {
+  -webkit-transform: translate3d(100%, 0, 0); }
+
 @-webkit-keyframes slideInLeft {
   0% {
     -webkit-transform: translate3d(100%, 0, 0); }
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 482591b3cf..323569d6b5 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -25285,30 +25285,25 @@ angular.module('ionic.ui.navRouter', [])
   $rootScope.stackCursorPosition = 0;
 }])
 
-.directive('navRouter', ['$rootScope', '$location', '$window', '$route', function($rootScope, $location, $window, $route) {
+.directive('navRouter', ['$rootScope', '$timeout', '$location', '$window', '$route', function($rootScope, $timeout, $location, $window, $route) {
   return {
     restrict: 'AC',
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
-      $element.addClass($scope.animation);
+      var isFirst = true;
 
-      $scope.isReverse = false;
-
-
-      var reverseTransition = ionic.throttle(function() {
+      var reverseTransition = function() {
         console.log('REVERSE');
         $element.removeClass($scope.animation);
         $element.addClass($scope.animation + '-reverse');
-      }, 1000, {
-      })
+      };
 
-      var forwardTransition = ionic.throttle(function() {
+      var forwardTransition = function() {
         console.log('FORWARD');
         $element.removeClass($scope.animation + '-reverse');
         $element.addClass($scope.animation);
-      }, 1000, {
-      });
+      };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
         console.log('ROUTE CHANGED', a, e);
@@ -25318,6 +25313,12 @@ angular.module('ionic.ui.navRouter', [])
         var back, historyState = $window.history.state;
 
         back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
+
+        if(isFirst) {
+          // Don't animate
+          //return;
+        }
+
         if(back) {
           reverseTransition();
         } else {
@@ -25329,6 +25330,12 @@ angular.module('ionic.ui.navRouter', [])
         // Store the new location
         console.log('LOCATION CHANGE SUCCESS');
         $rootScope.actualLocation = $location.path();
+        if(isFirst) {
+          isFirst = false;
+          $timeout(function() {
+            //reverseTransition();
+          }, 200);
+        }
       });  
 
 
diff --git a/js/ext/angular/src/directive/ionicNavRouter.js b/js/ext/angular/src/directive/ionicNavRouter.js
index 6dccc86b41..6a99df2393 100644
--- a/js/ext/angular/src/directive/ionicNavRouter.js
+++ b/js/ext/angular/src/directive/ionicNavRouter.js
@@ -25,30 +25,25 @@ angular.module('ionic.ui.navRouter', [])
   $rootScope.stackCursorPosition = 0;
 }])
 
-.directive('navRouter', ['$rootScope', '$location', '$window', '$route', function($rootScope, $location, $window, $route) {
+.directive('navRouter', ['$rootScope', '$timeout', '$location', '$window', '$route', function($rootScope, $timeout, $location, $window, $route) {
   return {
     restrict: 'AC',
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
-      $element.addClass($scope.animation);
+      var isFirst = true;
 
-      $scope.isReverse = false;
-
-
-      var reverseTransition = ionic.throttle(function() {
+      var reverseTransition = function() {
         console.log('REVERSE');
         $element.removeClass($scope.animation);
         $element.addClass($scope.animation + '-reverse');
-      }, 1000, {
-      })
+      };
 
-      var forwardTransition = ionic.throttle(function() {
+      var forwardTransition = function() {
         console.log('FORWARD');
         $element.removeClass($scope.animation + '-reverse');
         $element.addClass($scope.animation);
-      }, 1000, {
-      });
+      };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
         console.log('ROUTE CHANGED', a, e);
@@ -58,6 +53,12 @@ angular.module('ionic.ui.navRouter', [])
         var back, historyState = $window.history.state;
 
         back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
+
+        if(isFirst) {
+          // Don't animate
+          //return;
+        }
+
         if(back) {
           reverseTransition();
         } else {
@@ -69,6 +70,12 @@ angular.module('ionic.ui.navRouter', [])
         // Store the new location
         console.log('LOCATION CHANGE SUCCESS');
         $rootScope.actualLocation = $location.path();
+        if(isFirst) {
+          isFirst = false;
+          $timeout(function() {
+            //reverseTransition();
+          }, 200);
+        }
       });  
 
 
diff --git a/js/ext/angular/test/navRouter.html b/js/ext/angular/test/navRouter.html
index 57be3332dd..7c79972c5f 100644
--- a/js/ext/angular/test/navRouter.html
+++ b/js/ext/angular/test/navRouter.html
@@ -9,62 +9,9 @@
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
     <script src="../../../../dist/js/ionic.js"></script>
     <script src="../../../../dist/js/ionic-angular.js"></script>
-    <style>
-.view-animate > .ng-enter, .view-animate > .ng-leave {
-  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
-  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
- 
-  display:block;
-  width:100%;
-  border-left:1px solid black;
- 
-  position:absolute;
-  top:0;
-  left:0;
-  right:0;
-  bottom:0;
-  padding:10px;
-}
- 
-.view-animate > .ng-enter {
-      -webkit-transform: translate3d(100%, 0, 0);
-    }
-    .view-animate > .ng-enter.ng-enter-active {
-      -webkit-transform: translate3d(0, 0, 0);
-    }
-    .view-animate > .ng-leave.ng-leave-active {
-      -webkit-transform: translate3d(-100%, 0, 0);
-    }
-    .view-animate-reverse > .ng-enter, .view-animate-reverse > .ng-leave {
-      -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
-      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
-     
-      display:block;
-      width:100%;
-      border-left:1px solid black;
-     
-      position:absolute;
-      top:0;
-      left:0;
-      right:0;
-      bottom:0;
-      padding:10px;
-    }
-     
-    .view-animate-reverse > .ng-enter {
-      -webkit-transform: translate3d(-100%, 0, 0);
-    }
-    .view-animate-reverse > .ng-enter.ng-enter-active {
-      -webkit-transform: translate3d(0%, 0, 0);
-    }
-    .view-animate-reverse > .ng-leave.ng-leave-active {
-      -webkit-transform: translate3d(100%, 0, 0);
-    }
-
-    </style>
   </head>
   <body>
-    <pane nav-router animation="view-animate">
+    <pane nav-router animation="slide-left-right">
       <ng-view></ng-view>
     </pane>
 
diff --git a/scss/_animations.scss b/scss/_animations.scss
index 77ff8b6ad3..5e725cf6e7 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -7,6 +7,48 @@
  * and enhanced easily.
  */
 
+.slide-left-right {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+  }
+  > .ng-enter, &.ng-enter {
+    -webkit-transform: translate3d(100%, 0, 0);
+  }
+  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    -webkit-transform: translate3d(-100%, 0, 0);
+  }
+}
+.slide-left-right-reverse {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+  }
+  > .ng-enter, &.ng-enter {
+    -webkit-transform: translate3d(-100%, 0, 0);
+  }
+  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    -webkit-transform: translate3d(100%, 0, 0);
+  }
+}
+
+
 @-webkit-keyframes slideInLeft {
   0% {
     -webkit-transform: translate3d(100%, 0, 0);

From feb44cc6d05822d3223d7a212ed931edcc093db7 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@codiqa.com>
Date: Mon, 18 Nov 2013 19:43:36 -0600
Subject: [PATCH 03/10] Fixed initial animation issue

---
 dist/css/ionic.css                            | 25 +++++++++++++------
 dist/css/themes/ionic-ios7.css                |  5 ++--
 dist/js/ionic-angular.js                      | 14 ++++++++---
 .../angular/src/directive/ionicNavRouter.js   | 14 ++++++++---
 js/ext/angular/test/navRouter.html            |  6 +++++
 scss/_animations.scss                         | 12 +++++++++
 6 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index e74a6c0074..9017c2c93f 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -183,7 +183,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -630,13 +630,13 @@ address {
   font-style: normal;
   line-height: 1.42857; }
 
-a.subdued‎ {
+a.subduedΓÇÄ {
   padding-right: 10px;
   color: #f8f8f8;
   text-decoration: none; }
-  a.subdued‎:hover {
+  a.subduedΓÇÄ:hover {
     text-decoration: none; }
-  a.subdued‎:last-child {
+  a.subduedΓÇÄ:last-child {
     padding-right: 0; }
 
 /**
@@ -2329,7 +2329,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color 0.1s ease-in-out; }
+    transition: background-color .1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -2344,7 +2344,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity 0.05s ease-in-out;
+  transition: opacity .05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -2797,7 +2797,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px white; }
+    text-shadow: 0px 0px 10px #fff; }
   .button-icon .icon {
     font-size: 32px; }
 
@@ -2911,6 +2911,15 @@ a.button {
  * and pretty easy on performance. They can be overidden
  * and enhanced easily.
  */
+.noop-animation > .ng-enter, .noop-animation.ng-enter, .noop-animation > .ng-leave, .noop-animation.ng-leave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms; }
+
 .slide-left-right > .ng-enter, .slide-left-right.ng-enter, .slide-left-right > .ng-leave, .slide-left-right.ng-leave {
   position: absolute;
   top: 0;
@@ -3522,7 +3531,7 @@ a.button {
 .platform-ios7 .has-header {
   margin-top: 64px; }
 
-/*
+/*!
   Ionicons, v1.3.5
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework
diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
index 53b57eba7c..680f21850c 100644
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /** 
  * Nav controllers and header bar animations
  */
@@ -119,7 +118,7 @@
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -134,4 +133,4 @@
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 323569d6b5..98287837b2 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -25291,16 +25291,24 @@ angular.module('ionic.ui.navRouter', [])
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
+      $element.addClass('noop-animation');
+
       var isFirst = true;
 
+      var initTransition = function() {
+        //$element.addClass($scope.animation);
+      };
+
       var reverseTransition = function() {
         console.log('REVERSE');
+        $element.removeClass('noop-animation');
         $element.removeClass($scope.animation);
         $element.addClass($scope.animation + '-reverse');
       };
 
       var forwardTransition = function() {
         console.log('FORWARD');
+        $element.removeClass('noop-animation');
         $element.removeClass($scope.animation + '-reverse');
         $element.addClass($scope.animation);
       };
@@ -25316,7 +25324,7 @@ angular.module('ionic.ui.navRouter', [])
 
         if(isFirst) {
           // Don't animate
-          //return;
+          return;
         }
 
         if(back) {
@@ -25332,9 +25340,7 @@ angular.module('ionic.ui.navRouter', [])
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
-          $timeout(function() {
-            //reverseTransition();
-          }, 200);
+          initTransition();
         }
       });  
 
diff --git a/js/ext/angular/src/directive/ionicNavRouter.js b/js/ext/angular/src/directive/ionicNavRouter.js
index 6a99df2393..bcf746d8f9 100644
--- a/js/ext/angular/src/directive/ionicNavRouter.js
+++ b/js/ext/angular/src/directive/ionicNavRouter.js
@@ -31,16 +31,24 @@ angular.module('ionic.ui.navRouter', [])
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
+      $element.addClass('noop-animation');
+
       var isFirst = true;
 
+      var initTransition = function() {
+        //$element.addClass($scope.animation);
+      };
+
       var reverseTransition = function() {
         console.log('REVERSE');
+        $element.removeClass('noop-animation');
         $element.removeClass($scope.animation);
         $element.addClass($scope.animation + '-reverse');
       };
 
       var forwardTransition = function() {
         console.log('FORWARD');
+        $element.removeClass('noop-animation');
         $element.removeClass($scope.animation + '-reverse');
         $element.addClass($scope.animation);
       };
@@ -56,7 +64,7 @@ angular.module('ionic.ui.navRouter', [])
 
         if(isFirst) {
           // Don't animate
-          //return;
+          return;
         }
 
         if(back) {
@@ -72,9 +80,7 @@ angular.module('ionic.ui.navRouter', [])
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
-          $timeout(function() {
-            //reverseTransition();
-          }, 200);
+          initTransition();
         }
       });  
 
diff --git a/js/ext/angular/test/navRouter.html b/js/ext/angular/test/navRouter.html
index 7c79972c5f..93e27df89e 100644
--- a/js/ext/angular/test/navRouter.html
+++ b/js/ext/angular/test/navRouter.html
@@ -18,6 +18,7 @@
     <script id="page1.html" type="text/ng-template">
       <pane>
         <h1>Page 1</h1>
+        <span>{{num}}</span>
         <a class="button button-pure" nav-back>Back</a>
         <a class="button button-assertive" href="#/page2">Next</a>
       </pane>
@@ -42,6 +43,7 @@
       .config(function($routeProvider, $locationProvider) {
         $routeProvider.when('/page1', {
           templateUrl: 'page1.html',
+          controller: 'Page1Ctrl'
         });
 
         $routeProvider.when('/page2', {
@@ -58,6 +60,10 @@
         // configure html5 to get links working on jsfiddle
         //$locationProvider.html5Mode(true);
 
+      })
+
+      .controller('Page1Ctrl', function($scope) {
+        $scope.num = Math.floor(Math.random() * 100);
       });
 
       
diff --git a/scss/_animations.scss b/scss/_animations.scss
index 5e725cf6e7..9a5c1eaf24 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -7,6 +7,18 @@
  * and enhanced easily.
  */
 
+.noop-animation {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+  }
+}
+
 .slide-left-right {
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
     position:absolute;

From 26371a0c859fe5ff7948f1a72f4ebf430466eec8 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 19 Nov 2013 08:58:57 -0600
Subject: [PATCH 04/10] Back button stuff kind of working

---
 dist/css/ionic.css                            | 52 +++++++++--
 dist/css/themes/ionic-ios7.css                |  5 +-
 dist/js/ionic-angular.js                      | 90 ++++++++++++++++++-
 .../angular/src/directive/ionicNavRouter.js   | 89 +++++++++++++++++-
 js/ext/angular/src/ionicAngular.js            |  1 -
 js/ext/angular/test/navRouter.html            |  1 +
 scss/_animations.scss                         | 47 ++++++++++
 7 files changed, 269 insertions(+), 16 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 9017c2c93f..1e93d1671d 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -183,7 +183,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -630,13 +630,13 @@ address {
   font-style: normal;
   line-height: 1.42857; }
 
-a.subduedΓÇÄ {
+a.subdued‎ {
   padding-right: 10px;
   color: #f8f8f8;
   text-decoration: none; }
-  a.subduedΓÇÄ:hover {
+  a.subdued‎:hover {
     text-decoration: none; }
-  a.subduedΓÇÄ:last-child {
+  a.subdued‎:last-child {
     padding-right: 0; }
 
 /**
@@ -2329,7 +2329,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color .1s ease-in-out; }
+    transition: background-color 0.1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -2344,7 +2344,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity .05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -2797,7 +2797,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px #fff; }
+    text-shadow: 0px 0px 10px white; }
   .button-icon .icon {
     font-size: 32px; }
 
@@ -2950,6 +2950,42 @@ a.button {
 .slide-left-right-reverse > .ng-leave.ng-leave-active, .slide-left-right-reverse.ng-leave.ng-leave-active {
   -webkit-transform: translate3d(100%, 0, 0); }
 
+.slide-left-right-ios7 > .ng-enter, .slide-left-right-ios7.ng-enter, .slide-left-right-ios7 > .ng-leave, .slide-left-right-ios7.ng-leave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transition: all 250ms;
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition: all 250ms;
+  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.2), 1px 0px 3px rgba(0, 0, 0, 0.2); }
+.slide-left-right-ios7 > .ng-enter, .slide-left-right-ios7.ng-enter {
+  -webkit-transform: translate3d(100%, 0, 0); }
+.slide-left-right-ios7 > .ng-enter.ng-enter-active, .slide-left-right-ios7.ng-enter.ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.slide-left-right-ios7 > .ng-leave.ng-leave-active, .slide-left-right-ios7.ng-leave.ng-leave-active {
+  -webkit-transform: translate3d(-20%, 0, 0); }
+
+.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter, .slide-left-right-ios7-reverse > .ng-leave, .slide-left-right-ios7-reverse.ng-leave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transition: all 250ms;
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter {
+  -webkit-transform: translate3d(-20%, 0, 0); }
+.slide-left-right-ios7-reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7-reverse.ng-enter.ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.slide-left-right-ios7-reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7-reverse.ng-leave.ng-leave-active {
+  -webkit-transform: translate3d(100%, 0, 0); }
+
 @-webkit-keyframes slideInLeft {
   0% {
     -webkit-transform: translate3d(100%, 0, 0); }
@@ -3531,7 +3567,7 @@ a.button {
 .platform-ios7 .has-header {
   margin-top: 64px; }
 
-/*!
+/*
   Ionicons, v1.3.5
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework
diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
index 680f21850c..53b57eba7c 100644
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /** 
  * Nav controllers and header bar animations
  */
@@ -118,7 +119,7 @@
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -133,4 +134,4 @@
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 98287837b2..5089183fb8 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -23941,7 +23941,6 @@ angular.module('ionic.service', [
 angular.module('ionic.ui', [
                             'ionic.ui.content',
                             'ionic.ui.tabs',
-                            'ionic.ui.nav',
                             'ionic.ui.navRouter',
                             'ionic.ui.header',
                             'ionic.ui.sideMenu',
@@ -25288,6 +25287,14 @@ angular.module('ionic.ui.navRouter', [])
 .directive('navRouter', ['$rootScope', '$timeout', '$location', '$window', '$route', function($rootScope, $timeout, $location, $window, $route) {
   return {
     restrict: 'AC',
+    // So you can require being under this
+    controller: ['$scope', '$element', function($scope, $element) {
+      this.navBar = {
+        isVisible: true
+      };
+
+      $scope.navController = this;
+    }],
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
@@ -25379,13 +25386,90 @@ angular.module('ionic.ui.navRouter', [])
   }
 }])
 
-.directive('navBack', ['$window', function($window) {
+/**
+ * Our Nav Bar directive which updates as the controller state changes.
+ */
+.directive('navBar', ['$rootScope', function($rootScope) {
+  return {
+    restrict: 'E',
+    require: '^navRouter',
+    replace: true,
+    scope: {
+      type: '@',
+      backButtonType: '@',
+      backButtonLabel: '@',
+      backButtonIcon: '@',
+      alignTitle: '@',
+    },
+    template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
+        '<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<h1 class="title">{{navController.getTopController().scope.title}}</h1>' + 
+      '</header>',
+    link: function($scope, $element, $attr, navCtrl) {
+      var backButton;
+
+      $scope.enableBackButton = true;
+
+      $scope.backButtonContent = '';
+
+      if($scope.backButtonIcon) {
+        $scope.backButtonContent += '<i class="icon ' + $scope.backButtonIcon + '"></i>';
+      }
+      if($scope.backButtonLabel) {
+        $scope.backButtonContent += ' ' + $scope.backButtonLabel
+      }
+
+      $rootScope.$watch('stackCursorPosition', function(value) {
+        if(value > 0) {
+          $scope.showBackButton = true;
+        } else {
+          $scope.showBackButton = false;
+        }
+        console.log('Stack cursor change', value);
+      });
+
+      $scope.navController = navCtrl;
+
+      $scope.goBack = function() {
+        navCtrl.popController();
+      };
+
+
+      var hb = new ionic.views.HeaderBar({
+        el: $element[0],
+        alignTitle: $scope.alignTitle || 'center'
+      });
+
+      $element.addClass($scope.type);
+
+      $scope.headerBarView = hb;
+
+      $scope.$parent.$on('navigation.push', function() {
+        backButton = angular.element($element[0].querySelector('.button'));
+        backButton.addClass($scope.backButtonType);
+        hb.align();
+      });
+      $scope.$parent.$on('navigation.pop', function() {
+        hb.align();
+      });
+
+      $scope.$on('$destroy', function() {
+        //
+      });
+    }
+  };
+}])
+
+.directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
   return {
     restrict: 'AC',
     require: '^?navRouter',
     link: function($scope, $element, $attr, navCtrl) {
       var goBack = function() {
-        $window.history.back();
+        // Only trigger back if the stack is greater than zero
+        if($rootScope.stackCursorPosition > 0) {
+          $window.history.back();
+        }
       };
       $element.bind('tap', goBack);
       $element.bind('click', goBack);
diff --git a/js/ext/angular/src/directive/ionicNavRouter.js b/js/ext/angular/src/directive/ionicNavRouter.js
index bcf746d8f9..3995615838 100644
--- a/js/ext/angular/src/directive/ionicNavRouter.js
+++ b/js/ext/angular/src/directive/ionicNavRouter.js
@@ -28,6 +28,14 @@ angular.module('ionic.ui.navRouter', [])
 .directive('navRouter', ['$rootScope', '$timeout', '$location', '$window', '$route', function($rootScope, $timeout, $location, $window, $route) {
   return {
     restrict: 'AC',
+    // So you can require being under this
+    controller: ['$scope', '$element', function($scope, $element) {
+      this.navBar = {
+        isVisible: true
+      };
+
+      $scope.navController = this;
+    }],
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
@@ -119,13 +127,90 @@ angular.module('ionic.ui.navRouter', [])
   }
 }])
 
-.directive('navBack', ['$window', function($window) {
+/**
+ * Our Nav Bar directive which updates as the controller state changes.
+ */
+.directive('navBar', ['$rootScope', function($rootScope) {
+  return {
+    restrict: 'E',
+    require: '^navRouter',
+    replace: true,
+    scope: {
+      type: '@',
+      backButtonType: '@',
+      backButtonLabel: '@',
+      backButtonIcon: '@',
+      alignTitle: '@',
+    },
+    template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
+        '<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<h1 class="title">{{navController.getTopController().scope.title}}</h1>' + 
+      '</header>',
+    link: function($scope, $element, $attr, navCtrl) {
+      var backButton;
+
+      $scope.enableBackButton = true;
+
+      $scope.backButtonContent = '';
+
+      if($scope.backButtonIcon) {
+        $scope.backButtonContent += '<i class="icon ' + $scope.backButtonIcon + '"></i>';
+      }
+      if($scope.backButtonLabel) {
+        $scope.backButtonContent += ' ' + $scope.backButtonLabel
+      }
+
+      $rootScope.$watch('stackCursorPosition', function(value) {
+        if(value > 0) {
+          $scope.showBackButton = true;
+        } else {
+          $scope.showBackButton = false;
+        }
+        console.log('Stack cursor change', value);
+      });
+
+      $scope.navController = navCtrl;
+
+      $scope.goBack = function() {
+        navCtrl.popController();
+      };
+
+
+      var hb = new ionic.views.HeaderBar({
+        el: $element[0],
+        alignTitle: $scope.alignTitle || 'center'
+      });
+
+      $element.addClass($scope.type);
+
+      $scope.headerBarView = hb;
+
+      $scope.$parent.$on('navigation.push', function() {
+        backButton = angular.element($element[0].querySelector('.button'));
+        backButton.addClass($scope.backButtonType);
+        hb.align();
+      });
+      $scope.$parent.$on('navigation.pop', function() {
+        hb.align();
+      });
+
+      $scope.$on('$destroy', function() {
+        //
+      });
+    }
+  };
+}])
+
+.directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
   return {
     restrict: 'AC',
     require: '^?navRouter',
     link: function($scope, $element, $attr, navCtrl) {
       var goBack = function() {
-        $window.history.back();
+        // Only trigger back if the stack is greater than zero
+        if($rootScope.stackCursorPosition > 0) {
+          $window.history.back();
+        }
       };
       $element.bind('tap', goBack);
       $element.bind('click', goBack);
diff --git a/js/ext/angular/src/ionicAngular.js b/js/ext/angular/src/ionicAngular.js
index 13d3326d68..c94e8e8f8d 100644
--- a/js/ext/angular/src/ionicAngular.js
+++ b/js/ext/angular/src/ionicAngular.js
@@ -15,7 +15,6 @@ angular.module('ionic.service', [
 angular.module('ionic.ui', [
                             'ionic.ui.content',
                             'ionic.ui.tabs',
-                            'ionic.ui.nav',
                             'ionic.ui.navRouter',
                             'ionic.ui.header',
                             'ionic.ui.sideMenu',
diff --git a/js/ext/angular/test/navRouter.html b/js/ext/angular/test/navRouter.html
index 93e27df89e..42b6fe8dac 100644
--- a/js/ext/angular/test/navRouter.html
+++ b/js/ext/angular/test/navRouter.html
@@ -12,6 +12,7 @@
   </head>
   <body>
     <pane nav-router animation="slide-left-right">
+      <nav-bar back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
       <ng-view></ng-view>
     </pane>
 
diff --git a/scss/_animations.scss b/scss/_animations.scss
index 9a5c1eaf24..11f6b393bd 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -1,3 +1,4 @@
+$ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
 
 /**
  * Animations
@@ -60,6 +61,52 @@
   }
 }
 
+.slide-left-right-ios7 {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    -webkit-transition:all 250ms;
+    -webkit-transition-timing-function: $ios7-timing-function;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    transition:all 250ms;
+    transition-timing-function: $ios7-timing-function;
+    box-shadow: $menu-side-shadow;
+  }
+  > .ng-enter, &.ng-enter {
+    -webkit-transform: translate3d(100%, 0, 0);
+  }
+  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    -webkit-transform: translate3d(-20%, 0, 0);
+  }
+}
+.slide-left-right-ios7-reverse {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    -webkit-transition:all 250ms;
+    -webkit-transition-timing-function: $ios7-timing-function;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    transition-timing-function: $ios7-timing-function;
+  }
+  > .ng-enter, &.ng-enter {
+    -webkit-transform: translate3d(-20%, 0, 0);
+  }
+  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    -webkit-transform: translate3d(100%, 0, 0);
+  }
+}
 
 @-webkit-keyframes slideInLeft {
   0% {

From 6ac1830f980a98beb2e707ef2b839934c9569210 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 19 Nov 2013 12:07:58 -0600
Subject: [PATCH 05/10] Sexy title anim

---
 dist/css/ionic.css                            |  55 +++++--
 dist/js/ionic-angular.js                      |  84 +++++++++--
 .../angular/src/directive/ionicNavRouter.js   |  84 +++++++++--
 js/ext/angular/test/navRouter.html            |  19 +--
 scss/_animations.scss                         | 139 ++++++++++++------
 5 files changed, 294 insertions(+), 87 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 1e93d1671d..10aa8e7e86 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2934,8 +2934,7 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0); }
 .slide-left-right > .ng-leave.ng-leave-active, .slide-left-right.ng-leave.ng-leave-active {
   -webkit-transform: translate3d(-100%, 0, 0); }
-
-.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter, .slide-left-right-reverse > .ng-leave, .slide-left-right-reverse.ng-leave {
+.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter, .slide-left-right.reverse > .ng-leave, .slide-left-right.reverse.ng-leave {
   position: absolute;
   top: 0;
   left: 0;
@@ -2943,11 +2942,11 @@ a.button {
   bottom: 0;
   -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
   transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms; }
-.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter {
+.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter {
   -webkit-transform: translate3d(-100%, 0, 0); }
-.slide-left-right-reverse > .ng-enter.ng-enter-active, .slide-left-right-reverse.ng-enter.ng-enter-active {
+.slide-left-right.reverse > .ng-enter.ng-enter-active, .slide-left-right.reverse.ng-enter.ng-enter-active {
   -webkit-transform: translate3d(0, 0, 0); }
-.slide-left-right-reverse > .ng-leave.ng-leave-active, .slide-left-right-reverse.ng-leave.ng-leave-active {
+.slide-left-right.reverse > .ng-leave.ng-leave-active, .slide-left-right.reverse.ng-leave.ng-leave-active {
   -webkit-transform: translate3d(100%, 0, 0); }
 
 .slide-left-right-ios7 > .ng-enter, .slide-left-right-ios7.ng-enter, .slide-left-right-ios7 > .ng-leave, .slide-left-right-ios7.ng-leave {
@@ -2968,8 +2967,7 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0); }
 .slide-left-right-ios7 > .ng-leave.ng-leave-active, .slide-left-right-ios7.ng-leave.ng-leave-active {
   -webkit-transform: translate3d(-20%, 0, 0); }
-
-.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter, .slide-left-right-ios7-reverse > .ng-leave, .slide-left-right-ios7-reverse.ng-leave {
+.slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.reverse.ng-enter, .slide-left-right-ios7.reverse > .ng-leave, .slide-left-right-ios7.reverse.ng-leave {
   position: absolute;
   top: 0;
   left: 0;
@@ -2979,11 +2977,11 @@ a.button {
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
   transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
-.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter {
+.slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.reverse.ng-enter {
   -webkit-transform: translate3d(-20%, 0, 0); }
-.slide-left-right-ios7-reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7-reverse.ng-enter.ng-enter-active {
+.slide-left-right-ios7.reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7.reverse.ng-enter.ng-enter-active {
   -webkit-transform: translate3d(0, 0, 0); }
-.slide-left-right-ios7-reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7-reverse.ng-leave.ng-leave-active {
+.slide-left-right-ios7.reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7.reverse.ng-leave.ng-leave-active {
   -webkit-transform: translate3d(100%, 0, 0); }
 
 @-webkit-keyframes slideInLeft {
@@ -3209,6 +3207,43 @@ a.button {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg); } }
 
+/**
+ * Some component specific animations
+ */
+.nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter, .nav-title-slide-ios7 > .ng-leave, .nav-title-slide-ios7.ng-leave {
+  -webkit-transition: all 250ms;
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition: all 250ms;
+  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  opacity: 1; }
+.nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter {
+  opacity: 0;
+  -webkit-transform: translate3d(30%, 0, 0); }
+.nav-title-slide-ios7 > .ng-enter.ng-enter-active, .nav-title-slide-ios7.ng-enter.ng-enter-active {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0); }
+.nav-title-slide-ios7 > .ng-leave.ng-leave-active, .nav-title-slide-ios7.ng-leave.ng-leave-active {
+  opacity: 0;
+  -webkit-transform: translate3d(-30%, 0, 0); }
+
+.reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter, .reverse .nav-title-slide-ios7 > .ng-leave, .reverse .nav-title-slide-ios7.ng-leave {
+  -webkit-transition: all 250ms;
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition: all 250ms;
+  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  opacity: 1; }
+.reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter {
+  opacity: 0;
+  -webkit-transform: translate3d(-30%, 0, 0); }
+.reverse .nav-title-slide-ios7 > .ng-enter.ng-enter-active, .reverse .nav-title-slide-ios7.ng-enter.ng-enter-active {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0); }
+.reverse .nav-title-slide-ios7 > .ng-leave.ng-leave-active, .reverse .nav-title-slide-ios7.ng-leave.ng-leave-active {
+  opacity: 0;
+  -webkit-transform: translate3d(30%, 0, 0); }
+
 /**
  * Grid
  * --------------------------------------------------
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 5089183fb8..a916d718f7 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -25293,8 +25293,13 @@ angular.module('ionic.ui.navRouter', [])
         isVisible: true
       };
 
+      this.setTitle = function(value) {
+        $scope.$broadcast('navRouter.titleChanged', value);
+      };
+
       $scope.navController = this;
     }],
+
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
@@ -25309,27 +25314,27 @@ angular.module('ionic.ui.navRouter', [])
       var reverseTransition = function() {
         console.log('REVERSE');
         $element.removeClass('noop-animation');
-        $element.removeClass($scope.animation);
-        $element.addClass($scope.animation + '-reverse');
+        $element.addClass($scope.animation);
+        $element.addClass('reverse');
       };
 
       var forwardTransition = function() {
         console.log('FORWARD');
         $element.removeClass('noop-animation');
-        $element.removeClass($scope.animation + '-reverse');
+        $element.removeClass('reverse');
         $element.addClass($scope.animation);
       };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
         console.log('ROUTE CHANGED', a, e);
       });
-      $scope.$on('$routeChangeStart', function(e, a) {
-        console.log('ROUTE START', a, e);
+      $scope.$on('$routeChangeStart', function(e, next, current) {
+        console.log('ROUTE START', e, next, current);
         var back, historyState = $window.history.state;
 
         back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
 
-        if(isFirst) {
+        if(isFirst || (next && next.$$route.originalPath === "")) {
           // Don't animate
           return;
         }
@@ -25341,9 +25346,9 @@ angular.module('ionic.ui.navRouter', [])
         }
       });
 
-      $scope.$on('$locationChangeSuccess', function() {
+      $scope.$on('$locationChangeSuccess', function(a, b, c) {
         // Store the new location
-        console.log('LOCATION CHANGE SUCCESS');
+        console.log('LOCATION CHANGE SUCCESS', a, b, c);
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
@@ -25389,7 +25394,30 @@ angular.module('ionic.ui.navRouter', [])
 /**
  * Our Nav Bar directive which updates as the controller state changes.
  */
-.directive('navBar', ['$rootScope', function($rootScope) {
+.directive('navBar', ['$rootScope', '$animate', function($rootScope, $animate) {
+  var animate = function($element, oldTitle, newTitle, cb) {
+    if(!oldTitle || oldTitle === newTitle) {
+      cb();
+      return;
+    }
+
+    var title, nTitle, titles = $element[0].querySelectorAll('.title');
+    if(titles.length > 1) {
+      nTitle = titles[0];
+      title = titles[1];
+    } else if(titles.length) {
+      title = titles[0];
+      nTitle = document.createElement('h1');
+      nTitle.className = 'title';
+      nTitle.appendChild(document.createTextNode(newTitle));
+
+      $animate.enter(angular.element(nTitle), $element, angular.element($element[0].firstElementChild));
+      $animate.leave(angular.element(title), function() {
+        cb();
+      });
+    }
+  };
+
   return {
     restrict: 'E',
     require: '^navRouter',
@@ -25402,12 +25430,11 @@ angular.module('ionic.ui.navRouter', [])
       alignTitle: '@',
     },
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
-        '<h1 class="title">{{navController.getTopController().scope.title}}</h1>' + 
+        '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<h1 class="title" ng-bind="currentTitle"></h1>' + 
       '</header>',
     link: function($scope, $element, $attr, navCtrl) {
       var backButton;
-
       $scope.enableBackButton = true;
 
       $scope.backButtonContent = '';
@@ -25444,6 +25471,18 @@ angular.module('ionic.ui.navRouter', [])
 
       $scope.headerBarView = hb;
 
+      $scope.$parent.$on('navRouter.titleChanged', function(e, value) {
+        console.log(value);
+        console.log('Title changing from', $scope.currentTitle, 'to', value);
+        var oldTitle = $scope.currentTitle;
+        animate($element, oldTitle, value, function() {
+          $scope.currentTitle = value;
+          hb.align();
+        });
+      });
+
+
+      /*
       $scope.$parent.$on('navigation.push', function() {
         backButton = angular.element($element[0].querySelector('.button'));
         backButton.addClass($scope.backButtonType);
@@ -25452,6 +25491,7 @@ angular.module('ionic.ui.navRouter', [])
       $scope.$parent.$on('navigation.pop', function() {
         hb.align();
       });
+      */
 
       $scope.$on('$destroy', function() {
         //
@@ -25460,6 +25500,26 @@ angular.module('ionic.ui.navRouter', [])
   };
 }])
 
+.directive('navPage', ['$parse', function($parse) {
+  return {
+    restrict: 'E',
+    scope: true,
+    require: '^navRouter',
+    link: function($scope, $element, $attr, navCtrl) {
+      $element.addClass('pane');
+
+      var titleGet = $parse($attr.title);
+
+      $scope.$watch(titleGet, function(value) {
+        console.log('Title changed');
+        $scope.title = value;
+        navCtrl.setTitle(value);
+      });
+
+    }
+  }
+}])
+
 .directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
   return {
     restrict: 'AC',
diff --git a/js/ext/angular/src/directive/ionicNavRouter.js b/js/ext/angular/src/directive/ionicNavRouter.js
index 3995615838..119c4f6126 100644
--- a/js/ext/angular/src/directive/ionicNavRouter.js
+++ b/js/ext/angular/src/directive/ionicNavRouter.js
@@ -34,8 +34,13 @@ angular.module('ionic.ui.navRouter', [])
         isVisible: true
       };
 
+      this.setTitle = function(value) {
+        $scope.$broadcast('navRouter.titleChanged', value);
+      };
+
       $scope.navController = this;
     }],
+
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
@@ -50,27 +55,27 @@ angular.module('ionic.ui.navRouter', [])
       var reverseTransition = function() {
         console.log('REVERSE');
         $element.removeClass('noop-animation');
-        $element.removeClass($scope.animation);
-        $element.addClass($scope.animation + '-reverse');
+        $element.addClass($scope.animation);
+        $element.addClass('reverse');
       };
 
       var forwardTransition = function() {
         console.log('FORWARD');
         $element.removeClass('noop-animation');
-        $element.removeClass($scope.animation + '-reverse');
+        $element.removeClass('reverse');
         $element.addClass($scope.animation);
       };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
         console.log('ROUTE CHANGED', a, e);
       });
-      $scope.$on('$routeChangeStart', function(e, a) {
-        console.log('ROUTE START', a, e);
+      $scope.$on('$routeChangeStart', function(e, next, current) {
+        console.log('ROUTE START', e, next, current);
         var back, historyState = $window.history.state;
 
         back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
 
-        if(isFirst) {
+        if(isFirst || (next && next.$$route.originalPath === "")) {
           // Don't animate
           return;
         }
@@ -82,9 +87,9 @@ angular.module('ionic.ui.navRouter', [])
         }
       });
 
-      $scope.$on('$locationChangeSuccess', function() {
+      $scope.$on('$locationChangeSuccess', function(a, b, c) {
         // Store the new location
-        console.log('LOCATION CHANGE SUCCESS');
+        console.log('LOCATION CHANGE SUCCESS', a, b, c);
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
@@ -130,7 +135,30 @@ angular.module('ionic.ui.navRouter', [])
 /**
  * Our Nav Bar directive which updates as the controller state changes.
  */
-.directive('navBar', ['$rootScope', function($rootScope) {
+.directive('navBar', ['$rootScope', '$animate', function($rootScope, $animate) {
+  var animate = function($element, oldTitle, newTitle, cb) {
+    if(!oldTitle || oldTitle === newTitle) {
+      cb();
+      return;
+    }
+
+    var title, nTitle, titles = $element[0].querySelectorAll('.title');
+    if(titles.length > 1) {
+      nTitle = titles[0];
+      title = titles[1];
+    } else if(titles.length) {
+      title = titles[0];
+      nTitle = document.createElement('h1');
+      nTitle.className = 'title';
+      nTitle.appendChild(document.createTextNode(newTitle));
+
+      $animate.enter(angular.element(nTitle), $element, angular.element($element[0].firstElementChild));
+      $animate.leave(angular.element(title), function() {
+        cb();
+      });
+    }
+  };
+
   return {
     restrict: 'E',
     require: '^navRouter',
@@ -143,12 +171,11 @@ angular.module('ionic.ui.navRouter', [])
       alignTitle: '@',
     },
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
-        '<h1 class="title">{{navController.getTopController().scope.title}}</h1>' + 
+        '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<h1 class="title" ng-bind="currentTitle"></h1>' + 
       '</header>',
     link: function($scope, $element, $attr, navCtrl) {
       var backButton;
-
       $scope.enableBackButton = true;
 
       $scope.backButtonContent = '';
@@ -185,6 +212,18 @@ angular.module('ionic.ui.navRouter', [])
 
       $scope.headerBarView = hb;
 
+      $scope.$parent.$on('navRouter.titleChanged', function(e, value) {
+        console.log(value);
+        console.log('Title changing from', $scope.currentTitle, 'to', value);
+        var oldTitle = $scope.currentTitle;
+        animate($element, oldTitle, value, function() {
+          $scope.currentTitle = value;
+          hb.align();
+        });
+      });
+
+
+      /*
       $scope.$parent.$on('navigation.push', function() {
         backButton = angular.element($element[0].querySelector('.button'));
         backButton.addClass($scope.backButtonType);
@@ -193,6 +232,7 @@ angular.module('ionic.ui.navRouter', [])
       $scope.$parent.$on('navigation.pop', function() {
         hb.align();
       });
+      */
 
       $scope.$on('$destroy', function() {
         //
@@ -201,6 +241,26 @@ angular.module('ionic.ui.navRouter', [])
   };
 }])
 
+.directive('navPage', ['$parse', function($parse) {
+  return {
+    restrict: 'E',
+    scope: true,
+    require: '^navRouter',
+    link: function($scope, $element, $attr, navCtrl) {
+      $element.addClass('pane');
+
+      var titleGet = $parse($attr.title);
+
+      $scope.$watch(titleGet, function(value) {
+        console.log('Title changed');
+        $scope.title = value;
+        navCtrl.setTitle(value);
+      });
+
+    }
+  }
+}])
+
 .directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
   return {
     restrict: 'AC',
diff --git a/js/ext/angular/test/navRouter.html b/js/ext/angular/test/navRouter.html
index 42b6fe8dac..3efa0238b2 100644
--- a/js/ext/angular/test/navRouter.html
+++ b/js/ext/angular/test/navRouter.html
@@ -12,37 +12,37 @@
   </head>
   <body>
     <pane nav-router animation="slide-left-right">
-      <nav-bar back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
+      <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
       <ng-view></ng-view>
     </pane>
 
     <script id="page1.html" type="text/ng-template">
-      <pane>
+      <nav-page title="'Bears'">
         <h1>Page 1</h1>
         <span>{{num}}</span>
         <a class="button button-pure" nav-back>Back</a>
         <a class="button button-assertive" href="#/page2">Next</a>
-      </pane>
+      </nav-page>
     </script>
     <script id="page2.html" type="text/ng-template">
-      <pane>
+      <nav-page title="'Beets'">
         <h1>Page 2</h1>
         <a class="button button-pure" nav-back>Back</a>
         <a class="button button-assertive" href="#/page3">Next</a>
-      </pane>
+      </nav-page>
     </script>
     <script id="page3.html" type="text/ng-template">
-      <pane>
+      <nav-page title="'Battlestar Galactica'">
         <h1>Page 3</h1>
         <a class="button button-pure" nav-back>Back</a>
-      </pane>
+      </nav-page>
     </script>
     <script>
       angular.module('navTest', ['ionic'])
 
 
       .config(function($routeProvider, $locationProvider) {
-        $routeProvider.when('/page1', {
+        $routeProvider.when('/', {
           templateUrl: 'page1.html',
           controller: 'Page1Ctrl'
         });
@@ -54,9 +54,6 @@
         $routeProvider.when('/page3', {
           templateUrl: 'page3.html',
         });
-        $routeProvider.otherwise({
-          redirectTo: '/page1'
-        });
 
         // configure html5 to get links working on jsfiddle
         //$locationProvider.html5Mode(true);
diff --git a/scss/_animations.scss b/scss/_animations.scss
index 11f6b393bd..7e9c39b568 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -39,28 +39,28 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
   > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
     -webkit-transform: translate3d(-100%, 0, 0);
   }
-}
-.slide-left-right-reverse {
-  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
-    position:absolute;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
-    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
-    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
-  }
-  > .ng-enter, &.ng-enter {
-    -webkit-transform: translate3d(-100%, 0, 0);
-  }
-  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
-    -webkit-transform: translate3d(0, 0, 0);
-  }
-  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
-    -webkit-transform: translate3d(100%, 0, 0);
-  }
-}
 
+  &.reverse {
+    > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+      position:absolute;
+      top:0;
+      left:0;
+      right:0;
+      bottom:0;
+      -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    }
+    > .ng-enter, &.ng-enter {
+      -webkit-transform: translate3d(-100%, 0, 0);
+    }
+    > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+      -webkit-transform: translate3d(0, 0, 0);
+    }
+    > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+      -webkit-transform: translate3d(100%, 0, 0);
+    }
+  }
+}
 .slide-left-right-ios7 {
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
     position:absolute;
@@ -84,27 +84,28 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
   > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
     -webkit-transform: translate3d(-20%, 0, 0);
   }
-}
-.slide-left-right-ios7-reverse {
-  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
-    position:absolute;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
-    -webkit-transition:all 250ms;
-    -webkit-transition-timing-function: $ios7-timing-function;
-    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
-    transition-timing-function: $ios7-timing-function;
-  }
-  > .ng-enter, &.ng-enter {
-    -webkit-transform: translate3d(-20%, 0, 0);
-  }
-  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
-    -webkit-transform: translate3d(0, 0, 0);
-  }
-  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
-    -webkit-transform: translate3d(100%, 0, 0);
+  
+  &.reverse {
+    > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+      position:absolute;
+      top:0;
+      left:0;
+      right:0;
+      bottom:0;
+      -webkit-transition:all 250ms;
+      -webkit-transition-timing-function: $ios7-timing-function;
+      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+      transition-timing-function: $ios7-timing-function;
+    }
+    > .ng-enter, &.ng-enter {
+      -webkit-transform: translate3d(-20%, 0, 0);
+    }
+    > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+      -webkit-transform: translate3d(0, 0, 0);
+    }
+    > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+      -webkit-transform: translate3d(100%, 0, 0);
+    }
   }
 }
 
@@ -373,3 +374,57 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
   } 
 }
 
+
+
+/**
+ * Some component specific animations
+ */
+
+.nav-title-slide-ios7 {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    -webkit-transition:all 250ms;
+    -webkit-transition-timing-function: $ios7-timing-function;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    transition:all 250ms;
+    transition-timing-function: $ios7-timing-function;
+    opacity: 1;
+  }
+  > .ng-enter, &.ng-enter {
+    opacity: 0;
+    -webkit-transform: translate3d(30%, 0, 0);
+  }
+  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    opacity: 0;
+    -webkit-transform: translate3d(-30%, 0, 0);
+  }
+
+}
+.reverse {
+  .nav-title-slide-ios7 {
+    > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+      -webkit-transition:all 250ms;
+      -webkit-transition-timing-function: $ios7-timing-function;
+      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+      transition:all 250ms;
+      transition-timing-function: $ios7-timing-function;
+      opacity: 1;
+    }
+    > .ng-enter, &.ng-enter {
+      opacity: 0;
+      -webkit-transform: translate3d(-30%, 0, 0);
+    }
+    > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+      opacity: 1;
+      -webkit-transform: translate3d(0, 0, 0);
+    }
+    > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+      opacity: 0;
+      -webkit-transform: translate3d(30%, 0, 0);
+    }
+
+  }
+}

From 4616379d05c2f07b48bd562f2b235f1fedc3a71d Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 19 Nov 2013 12:58:19 -0600
Subject: [PATCH 06/10] Nice anims

---
 dist/js/ionic-angular.js                      | 36 +++++++++----------
 .../angular/src/directive/ionicNavRouter.js   | 36 +++++++++----------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index a916d718f7..0e4a9876be 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -25394,28 +25394,27 @@ angular.module('ionic.ui.navRouter', [])
 /**
  * Our Nav Bar directive which updates as the controller state changes.
  */
-.directive('navBar', ['$rootScope', '$animate', function($rootScope, $animate) {
-  var animate = function($element, oldTitle, newTitle, cb) {
+.directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
+  var animate = function($scope, $element, oldTitle, newTitle, cb) {
+    var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
+
     if(!oldTitle || oldTitle === newTitle) {
       cb();
       return;
     }
 
-    var title, nTitle, titles = $element[0].querySelectorAll('.title');
-    if(titles.length > 1) {
-      nTitle = titles[0];
-      title = titles[1];
-    } else if(titles.length) {
-      title = titles[0];
-      nTitle = document.createElement('h1');
-      nTitle.className = 'title';
-      nTitle.appendChild(document.createTextNode(newTitle));
+    title = angular.element(titles[0]);
+    oTitle = $compile('<h1 class="title" ng-bind="oldTitle"></h1>')($scope);
+    title.replaceWith(oTitle);
+    nTitle = $compile('<h1 class="title" ng-bind="currentTitle"></h1>')($scope);
 
-      $animate.enter(angular.element(nTitle), $element, angular.element($element[0].firstElementChild));
-      $animate.leave(angular.element(title), function() {
-        cb();
-      });
-    }
+    var insert = $element[0].firstElementChild || null;
+
+    $animate.enter(nTitle, $element, insert || angular.element(insert), function() {
+      cb();
+    });
+    $animate.leave(angular.element(oTitle), function() {
+    });
   };
 
   return {
@@ -25475,8 +25474,9 @@ angular.module('ionic.ui.navRouter', [])
         console.log(value);
         console.log('Title changing from', $scope.currentTitle, 'to', value);
         var oldTitle = $scope.currentTitle;
-        animate($element, oldTitle, value, function() {
-          $scope.currentTitle = value;
+        $scope.oldTitle = oldTitle;
+        $scope.currentTitle = value;
+        animate($scope, $element, oldTitle, value, function() {
           hb.align();
         });
       });
diff --git a/js/ext/angular/src/directive/ionicNavRouter.js b/js/ext/angular/src/directive/ionicNavRouter.js
index 119c4f6126..f8533fca53 100644
--- a/js/ext/angular/src/directive/ionicNavRouter.js
+++ b/js/ext/angular/src/directive/ionicNavRouter.js
@@ -135,28 +135,27 @@ angular.module('ionic.ui.navRouter', [])
 /**
  * Our Nav Bar directive which updates as the controller state changes.
  */
-.directive('navBar', ['$rootScope', '$animate', function($rootScope, $animate) {
-  var animate = function($element, oldTitle, newTitle, cb) {
+.directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
+  var animate = function($scope, $element, oldTitle, newTitle, cb) {
+    var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
+
     if(!oldTitle || oldTitle === newTitle) {
       cb();
       return;
     }
 
-    var title, nTitle, titles = $element[0].querySelectorAll('.title');
-    if(titles.length > 1) {
-      nTitle = titles[0];
-      title = titles[1];
-    } else if(titles.length) {
-      title = titles[0];
-      nTitle = document.createElement('h1');
-      nTitle.className = 'title';
-      nTitle.appendChild(document.createTextNode(newTitle));
+    title = angular.element(titles[0]);
+    oTitle = $compile('<h1 class="title" ng-bind="oldTitle"></h1>')($scope);
+    title.replaceWith(oTitle);
+    nTitle = $compile('<h1 class="title" ng-bind="currentTitle"></h1>')($scope);
 
-      $animate.enter(angular.element(nTitle), $element, angular.element($element[0].firstElementChild));
-      $animate.leave(angular.element(title), function() {
-        cb();
-      });
-    }
+    var insert = $element[0].firstElementChild || null;
+
+    $animate.enter(nTitle, $element, insert || angular.element(insert), function() {
+      cb();
+    });
+    $animate.leave(angular.element(oTitle), function() {
+    });
   };
 
   return {
@@ -216,8 +215,9 @@ angular.module('ionic.ui.navRouter', [])
         console.log(value);
         console.log('Title changing from', $scope.currentTitle, 'to', value);
         var oldTitle = $scope.currentTitle;
-        animate($element, oldTitle, value, function() {
-          $scope.currentTitle = value;
+        $scope.oldTitle = oldTitle;
+        $scope.currentTitle = value;
+        animate($scope, $element, oldTitle, value, function() {
           hb.align();
         });
       });

From cbd63fc08fcf72b4e76f5338ec9bc73528d289f6 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 19 Nov 2013 12:58:50 -0600
Subject: [PATCH 07/10] Note about nav not being used

---
 dist/js/ionic-angular.js                 | 4 ++++
 js/ext/angular/src/directive/ionicNav.js | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 0e4a9876be..24f4e90169 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -24910,6 +24910,10 @@ angular.module('ionic.ui.loading', [])
 (function() {
 'use strict';
 
+/**
+ * Note: currently unused
+ */
+
 /**
  * @description
  * The NavController is a navigation stack View Controller modelled off of 
diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js
index 4e65b828c9..4b2166aa82 100644
--- a/js/ext/angular/src/directive/ionicNav.js
+++ b/js/ext/angular/src/directive/ionicNav.js
@@ -1,6 +1,10 @@
 (function() {
 'use strict';
 
+/**
+ * Note: currently unused
+ */
+
 /**
  * @description
  * The NavController is a navigation stack View Controller modelled off of 

From 2064126e5fc3f4c7fd01a4b775172e5de4738301 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 19 Nov 2013 15:16:46 -0600
Subject: [PATCH 08/10] Getting close

---
 dist/css/ionic.css                            |   2 -
 dist/js/ionic-angular.js                      | 159 ++++++++++++++----
 .../angular/src/directive/ionicNavRouter.js   | 120 +++++++++----
 js/ext/angular/src/directive/ionicTabBar.js   |  39 ++++-
 js/ext/angular/test/navAndTabs.html           | 143 ++++++++++++++++
 scss/_animations.scss                         |   2 -
 6 files changed, 393 insertions(+), 72 deletions(-)
 create mode 100644 js/ext/angular/test/navAndTabs.html

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 10aa8e7e86..0b861cf713 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -3213,7 +3213,6 @@ a.button {
 .nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter, .nav-title-slide-ios7 > .ng-leave, .nav-title-slide-ios7.ng-leave {
   -webkit-transition: all 250ms;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
   transition: all 250ms;
   transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   opacity: 1; }
@@ -3230,7 +3229,6 @@ a.button {
 .reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter, .reverse .nav-title-slide-ios7 > .ng-leave, .reverse .nav-title-slide-ios7.ng-leave {
   -webkit-transition: all 250ms;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
   transition: all 250ms;
   transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   opacity: 1; }
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 24f4e90169..fe0c1dd761 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -25296,11 +25296,6 @@ angular.module('ionic.ui.navRouter', [])
       this.navBar = {
         isVisible: true
       };
-
-      this.setTitle = function(value) {
-        $scope.$broadcast('navRouter.titleChanged', value);
-      };
-
       $scope.navController = this;
     }],
 
@@ -25316,24 +25311,20 @@ angular.module('ionic.ui.navRouter', [])
       };
 
       var reverseTransition = function() {
-        console.log('REVERSE');
         $element.removeClass('noop-animation');
         $element.addClass($scope.animation);
         $element.addClass('reverse');
       };
 
       var forwardTransition = function() {
-        console.log('FORWARD');
         $element.removeClass('noop-animation');
         $element.removeClass('reverse');
         $element.addClass($scope.animation);
       };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
-        console.log('ROUTE CHANGED', a, e);
       });
       $scope.$on('$routeChangeStart', function(e, next, current) {
-        console.log('ROUTE START', e, next, current);
         var back, historyState = $window.history.state;
 
         back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
@@ -25352,7 +25343,6 @@ angular.module('ionic.ui.navRouter', [])
 
       $scope.$on('$locationChangeSuccess', function(a, b, c) {
         // Store the new location
-        console.log('LOCATION CHANGE SUCCESS', a, b, c);
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
@@ -25399,9 +25389,10 @@ angular.module('ionic.ui.navRouter', [])
  * Our Nav Bar directive which updates as the controller state changes.
  */
 .directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
-  var animate = function($scope, $element, oldTitle, newTitle, cb) {
+  var animate = function($scope, $element, oldTitle, data, cb) {
     var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
 
+    var newTitle = data.title;
     if(!oldTitle || oldTitle === newTitle) {
       cb();
       return;
@@ -25414,11 +25405,15 @@ angular.module('ionic.ui.navRouter', [])
 
     var insert = $element[0].firstElementChild || null;
 
-    $animate.enter(nTitle, $element, insert || angular.element(insert), function() {
+    $animate.enter(nTitle, $element, insert && angular.element(insert), function() {
       cb();
     });
     $animate.leave(angular.element(oTitle), function() {
     });
+
+    $scope.$on('navRouter.rightButtonsChanged', function(e, buttons) {
+      console.log('Buttons changing for nav bar', buttons);
+    });
   };
 
   return {
@@ -25433,15 +25428,21 @@ angular.module('ionic.ui.navRouter', [])
       alignTitle: '@',
     },
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<div class="buttons"> ' +
+          '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+          '<button ng-repeat="button in leftButtons" class="button" ng-bind="button.text"></button>' + 
+        '</div>' +
         '<h1 class="title" ng-bind="currentTitle"></h1>' + 
+        '<div class="buttons"> ' +
+          '<button ng-repeat="button in rightButtons" class="button" ng-bind="button.text"></button>' + 
+        '</div>' +
       '</header>',
     link: function($scope, $element, $attr, navCtrl) {
       var backButton;
+
+      // Create the back button content and show/hide it based on scope settings
       $scope.enableBackButton = true;
-
       $scope.backButtonContent = '';
-
       if($scope.backButtonIcon) {
         $scope.backButtonContent += '<i class="icon ' + $scope.backButtonIcon + '"></i>';
       }
@@ -25449,40 +25450,62 @@ angular.module('ionic.ui.navRouter', [])
         $scope.backButtonContent += ' ' + $scope.backButtonLabel
       }
 
+      // Listen for changes in the stack cursor position to indicate whether a back
+      // button should be shown (this can still be disabled by the $scope.enableBackButton
       $rootScope.$watch('stackCursorPosition', function(value) {
         if(value > 0) {
           $scope.showBackButton = true;
         } else {
           $scope.showBackButton = false;
         }
-        console.log('Stack cursor change', value);
       });
 
+      // Store a reference to our nav controller
       $scope.navController = navCtrl;
 
-      $scope.goBack = function() {
-        navCtrl.popController();
-      };
-
-
+      // Initialize our header bar view which will handle resizing and aligning our title labels
       var hb = new ionic.views.HeaderBar({
         el: $element[0],
         alignTitle: $scope.alignTitle || 'center'
       });
-
-      $element.addClass($scope.type);
-
       $scope.headerBarView = hb;
 
-      $scope.$parent.$on('navRouter.titleChanged', function(e, value) {
-        console.log(value);
-        console.log('Title changing from', $scope.currentTitle, 'to', value);
+      // Add the type of header bar class to this element
+      $element.addClass($scope.type);
+
+      var updateHeaderData = function(data) {
+        console.log('Header data changed', data);
+
         var oldTitle = $scope.currentTitle;
         $scope.oldTitle = oldTitle;
-        $scope.currentTitle = value;
-        animate($scope, $element, oldTitle, value, function() {
+        $scope.currentTitle = data.title;
+
+        if(typeof data.leftButtons !== 'undefined') {
+          $scope.leftButtons = data.leftButtons;
+        }
+        if(typeof data.rightButtons !== 'undefined') {
+          $scope.rightButtons = data.rightButtons;
+        }
+        if(typeof data.hideBackButton !== 'undefined') {
+          $scope.enableBackButton = data.hideBackButton !== true;
+        }
+
+        if(data.animate !== false) {
+          animate($scope, $element, oldTitle, data, function() {
+            hb.align();
+          });
+        } else {
           hb.align();
-        });
+        }
+      };
+
+      // Listen for changes on title change, and update the title
+      $scope.$parent.$on('navRouter.pageChanged', function(e, data) {
+        updateHeaderData(data);
+      });
+
+      $scope.$parent.$on('navRouter.pageShown', function(e, data) {
+        updateHeaderData(data);
       });
 
 
@@ -25512,12 +25535,43 @@ angular.module('ionic.ui.navRouter', [])
     link: function($scope, $element, $attr, navCtrl) {
       $element.addClass('pane');
 
-      var titleGet = $parse($attr.title);
+      $scope.icon = $attr.icon;
+      $scope.iconOn = $attr.iconOn;
+      $scope.iconOff = $attr.iconOff;
 
+      // Should we hide a back button when this tab is shown
+      $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
+
+      // Whether we should animate on tab change, also impacts whether we
+      // tell any parent nav controller to animate
+      $scope.animate = $scope.$eval($attr.animate);
+
+      // Grab whether we should update any parent nav router on tab changes
+      $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+
+      // watch for changes in the left buttons
+      var leftButtonsGet = $parse($attr.leftButtons);
+      $scope.$watch(leftButtonsGet, function(value) {
+        $scope.leftButtons = value;
+        if($scope.doesUpdateNavRouter) {
+          $scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
+        }
+      });
+
+      // watch for changes in the right buttons
+      var rightButtonsGet = $parse($attr.rightButtons);
+      $scope.$watch(rightButtonsGet, function(value) {
+        $scope.rightButtons = value;
+      });
+
+      // watch for changes in the title
+      var titleGet = $parse($attr.title);
       $scope.$watch(titleGet, function(value) {
-        console.log('Title changed');
         $scope.title = value;
-        navCtrl.setTitle(value);
+        $scope.$emit('navRouter.pageChanged', {
+          title: value,
+          animate: $scope.animate
+        });
       });
 
     }
@@ -25921,7 +25975,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
 })
 
 // Generic controller directive
-.directive('tab', ['$animate', function($animate) {
+.directive('tab', ['$animate', '$parse', function($animate, $parse) {
   return {
     restrict: 'E',
     replace: true,
@@ -25936,6 +25990,30 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
         $scope.icon = $attr.icon;
         $scope.iconOn = $attr.iconOn;
         $scope.iconOff = $attr.iconOff;
+
+        // Should we hide a back button when this tab is shown
+        $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
+
+        // Whether we should animate on tab change, also impacts whether we
+        // tell any parent nav controller to animate
+        $scope.animate = $scope.$eval($attr.animate);
+
+        // Grab whether we should update any parent nav router on tab changes
+        $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+
+        var leftButtonsGet = $parse($attr.leftButtons);
+        $scope.$watch(leftButtonsGet, function(value) {
+          $scope.leftButtons = value;
+          if($scope.doesUpdateNavRouter) {
+            $scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
+          }
+        });
+
+        var rightButtonsGet = $parse($attr.rightButtons);
+        $scope.$watch(rightButtonsGet, function(value) {
+          $scope.rightButtons = value;
+        });
+
         tabsCtrl.add($scope);
         
         $scope.$watch('isVisible', function(value) {
@@ -25955,6 +26033,19 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
               childElement.addClass('view-full');
               $animate.enter(clone, $element.parent(), $element);
 
+              if($scope.title) {
+                // Send the title up in case we are inside of a nav controller
+                if($scope.doesUpdateNavRouter) {
+                  $scope.$emit('navRouter.pageShown', {
+                    title: $scope.title,
+                    rightButtons: $scope.rightButtons,
+                    leftButtons: $scope.leftButtons,
+                    hideBackButton: $scope.hideBackButton || false,
+                    animate: $scope.animate || false
+                  });
+                }
+                //$scope.$emit('navRouter.titleChanged', $scope.title);
+              }
               $scope.$broadcast('tab.shown');
             });
           }
diff --git a/js/ext/angular/src/directive/ionicNavRouter.js b/js/ext/angular/src/directive/ionicNavRouter.js
index f8533fca53..0a7fce1c69 100644
--- a/js/ext/angular/src/directive/ionicNavRouter.js
+++ b/js/ext/angular/src/directive/ionicNavRouter.js
@@ -33,11 +33,6 @@ angular.module('ionic.ui.navRouter', [])
       this.navBar = {
         isVisible: true
       };
-
-      this.setTitle = function(value) {
-        $scope.$broadcast('navRouter.titleChanged', value);
-      };
-
       $scope.navController = this;
     }],
 
@@ -53,24 +48,20 @@ angular.module('ionic.ui.navRouter', [])
       };
 
       var reverseTransition = function() {
-        console.log('REVERSE');
         $element.removeClass('noop-animation');
         $element.addClass($scope.animation);
         $element.addClass('reverse');
       };
 
       var forwardTransition = function() {
-        console.log('FORWARD');
         $element.removeClass('noop-animation');
         $element.removeClass('reverse');
         $element.addClass($scope.animation);
       };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
-        console.log('ROUTE CHANGED', a, e);
       });
       $scope.$on('$routeChangeStart', function(e, next, current) {
-        console.log('ROUTE START', e, next, current);
         var back, historyState = $window.history.state;
 
         back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
@@ -89,7 +80,6 @@ angular.module('ionic.ui.navRouter', [])
 
       $scope.$on('$locationChangeSuccess', function(a, b, c) {
         // Store the new location
-        console.log('LOCATION CHANGE SUCCESS', a, b, c);
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
@@ -136,9 +126,10 @@ angular.module('ionic.ui.navRouter', [])
  * Our Nav Bar directive which updates as the controller state changes.
  */
 .directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
-  var animate = function($scope, $element, oldTitle, newTitle, cb) {
+  var animate = function($scope, $element, oldTitle, data, cb) {
     var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
 
+    var newTitle = data.title;
     if(!oldTitle || oldTitle === newTitle) {
       cb();
       return;
@@ -151,11 +142,15 @@ angular.module('ionic.ui.navRouter', [])
 
     var insert = $element[0].firstElementChild || null;
 
-    $animate.enter(nTitle, $element, insert || angular.element(insert), function() {
+    $animate.enter(nTitle, $element, insert && angular.element(insert), function() {
       cb();
     });
     $animate.leave(angular.element(oTitle), function() {
     });
+
+    $scope.$on('navRouter.rightButtonsChanged', function(e, buttons) {
+      console.log('Buttons changing for nav bar', buttons);
+    });
   };
 
   return {
@@ -170,15 +165,21 @@ angular.module('ionic.ui.navRouter', [])
       alignTitle: '@',
     },
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<div class="buttons"> ' +
+          '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+          '<button ng-repeat="button in leftButtons" class="button" ng-bind="button.text"></button>' + 
+        '</div>' +
         '<h1 class="title" ng-bind="currentTitle"></h1>' + 
+        '<div class="buttons"> ' +
+          '<button ng-repeat="button in rightButtons" class="button" ng-bind="button.text"></button>' + 
+        '</div>' +
       '</header>',
     link: function($scope, $element, $attr, navCtrl) {
       var backButton;
+
+      // Create the back button content and show/hide it based on scope settings
       $scope.enableBackButton = true;
-
       $scope.backButtonContent = '';
-
       if($scope.backButtonIcon) {
         $scope.backButtonContent += '<i class="icon ' + $scope.backButtonIcon + '"></i>';
       }
@@ -186,40 +187,62 @@ angular.module('ionic.ui.navRouter', [])
         $scope.backButtonContent += ' ' + $scope.backButtonLabel
       }
 
+      // Listen for changes in the stack cursor position to indicate whether a back
+      // button should be shown (this can still be disabled by the $scope.enableBackButton
       $rootScope.$watch('stackCursorPosition', function(value) {
         if(value > 0) {
           $scope.showBackButton = true;
         } else {
           $scope.showBackButton = false;
         }
-        console.log('Stack cursor change', value);
       });
 
+      // Store a reference to our nav controller
       $scope.navController = navCtrl;
 
-      $scope.goBack = function() {
-        navCtrl.popController();
-      };
-
-
+      // Initialize our header bar view which will handle resizing and aligning our title labels
       var hb = new ionic.views.HeaderBar({
         el: $element[0],
         alignTitle: $scope.alignTitle || 'center'
       });
-
-      $element.addClass($scope.type);
-
       $scope.headerBarView = hb;
 
-      $scope.$parent.$on('navRouter.titleChanged', function(e, value) {
-        console.log(value);
-        console.log('Title changing from', $scope.currentTitle, 'to', value);
+      // Add the type of header bar class to this element
+      $element.addClass($scope.type);
+
+      var updateHeaderData = function(data) {
+        console.log('Header data changed', data);
+
         var oldTitle = $scope.currentTitle;
         $scope.oldTitle = oldTitle;
-        $scope.currentTitle = value;
-        animate($scope, $element, oldTitle, value, function() {
+        $scope.currentTitle = data.title;
+
+        if(typeof data.leftButtons !== 'undefined') {
+          $scope.leftButtons = data.leftButtons;
+        }
+        if(typeof data.rightButtons !== 'undefined') {
+          $scope.rightButtons = data.rightButtons;
+        }
+        if(typeof data.hideBackButton !== 'undefined') {
+          $scope.enableBackButton = data.hideBackButton !== true;
+        }
+
+        if(data.animate !== false) {
+          animate($scope, $element, oldTitle, data, function() {
+            hb.align();
+          });
+        } else {
           hb.align();
-        });
+        }
+      };
+
+      // Listen for changes on title change, and update the title
+      $scope.$parent.$on('navRouter.pageChanged', function(e, data) {
+        updateHeaderData(data);
+      });
+
+      $scope.$parent.$on('navRouter.pageShown', function(e, data) {
+        updateHeaderData(data);
       });
 
 
@@ -249,12 +272,43 @@ angular.module('ionic.ui.navRouter', [])
     link: function($scope, $element, $attr, navCtrl) {
       $element.addClass('pane');
 
-      var titleGet = $parse($attr.title);
+      $scope.icon = $attr.icon;
+      $scope.iconOn = $attr.iconOn;
+      $scope.iconOff = $attr.iconOff;
 
+      // Should we hide a back button when this tab is shown
+      $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
+
+      // Whether we should animate on tab change, also impacts whether we
+      // tell any parent nav controller to animate
+      $scope.animate = $scope.$eval($attr.animate);
+
+      // Grab whether we should update any parent nav router on tab changes
+      $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+
+      // watch for changes in the left buttons
+      var leftButtonsGet = $parse($attr.leftButtons);
+      $scope.$watch(leftButtonsGet, function(value) {
+        $scope.leftButtons = value;
+        if($scope.doesUpdateNavRouter) {
+          $scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
+        }
+      });
+
+      // watch for changes in the right buttons
+      var rightButtonsGet = $parse($attr.rightButtons);
+      $scope.$watch(rightButtonsGet, function(value) {
+        $scope.rightButtons = value;
+      });
+
+      // watch for changes in the title
+      var titleGet = $parse($attr.title);
       $scope.$watch(titleGet, function(value) {
-        console.log('Title changed');
         $scope.title = value;
-        navCtrl.setTitle(value);
+        $scope.$emit('navRouter.pageChanged', {
+          title: value,
+          animate: $scope.animate
+        });
       });
 
     }
diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js
index d1f2cb70a4..5a3795cd34 100644
--- a/js/ext/angular/src/directive/ionicTabBar.js
+++ b/js/ext/angular/src/directive/ionicTabBar.js
@@ -72,7 +72,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
 })
 
 // Generic controller directive
-.directive('tab', ['$animate', function($animate) {
+.directive('tab', ['$animate', '$parse', function($animate, $parse) {
   return {
     restrict: 'E',
     replace: true,
@@ -87,6 +87,30 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
         $scope.icon = $attr.icon;
         $scope.iconOn = $attr.iconOn;
         $scope.iconOff = $attr.iconOff;
+
+        // Should we hide a back button when this tab is shown
+        $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
+
+        // Whether we should animate on tab change, also impacts whether we
+        // tell any parent nav controller to animate
+        $scope.animate = $scope.$eval($attr.animate);
+
+        // Grab whether we should update any parent nav router on tab changes
+        $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+
+        var leftButtonsGet = $parse($attr.leftButtons);
+        $scope.$watch(leftButtonsGet, function(value) {
+          $scope.leftButtons = value;
+          if($scope.doesUpdateNavRouter) {
+            $scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
+          }
+        });
+
+        var rightButtonsGet = $parse($attr.rightButtons);
+        $scope.$watch(rightButtonsGet, function(value) {
+          $scope.rightButtons = value;
+        });
+
         tabsCtrl.add($scope);
         
         $scope.$watch('isVisible', function(value) {
@@ -106,6 +130,19 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
               childElement.addClass('view-full');
               $animate.enter(clone, $element.parent(), $element);
 
+              if($scope.title) {
+                // Send the title up in case we are inside of a nav controller
+                if($scope.doesUpdateNavRouter) {
+                  $scope.$emit('navRouter.pageShown', {
+                    title: $scope.title,
+                    rightButtons: $scope.rightButtons,
+                    leftButtons: $scope.leftButtons,
+                    hideBackButton: $scope.hideBackButton || false,
+                    animate: $scope.animate || false
+                  });
+                }
+                //$scope.$emit('navRouter.titleChanged', $scope.title);
+              }
               $scope.$broadcast('tab.shown');
             });
           }
diff --git a/js/ext/angular/test/navAndTabs.html b/js/ext/angular/test/navAndTabs.html
new file mode 100644
index 0000000000..0f3346fdce
--- /dev/null
+++ b/js/ext/angular/test/navAndTabs.html
@@ -0,0 +1,143 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Nav Bars And Tabs</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+  </head>
+  <body>
+    <pane nav-router animation="slide-left-right">
+      <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
+      <ng-view></ng-view>
+    </pane>
+
+    <script id="page1.html" type="text/ng-template">
+      <nav-page title="'Pets'" hide-back-button="true">
+        <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
+
+          <!-- Pets tab -->
+          <tab title="Pets" icon="icon ion-home" ng-controller="PetsCtrl">
+            <content has-header="true" has-tabs="true">
+              <list>
+                <link-item ng-repeat="pet in pets" type="item-text-wrap" href="#/pet/{{pet.id}}">
+                    <h3>{{pet.title}}</h3>
+                    <p>{{pet.description}}</p>
+                  </item>
+                </link-item>
+              </list>
+            </content>
+          </tab>
+
+          <!-- Adoption tab -->
+          <tab title="Adopt" icon="icon ion-heart" ng-controller="AdoptCtrl" right-buttons="buttons">
+            <content has-header="true" has-tabs="true">
+              <div class="padding">
+                <h2>Adopt a pet today.</h2>
+              </div>
+              <div class="list list-inset">
+                <label class="item item-input">
+                  <span class="input-label">Your name</span>
+                  <input type="text">
+                </label>
+                <label class="item item-input">
+                  <span class="input-label">Your email</span>
+                  <input type="password">
+                </label>
+                <label class="item item-input">
+                  <textarea placeholder="Any more info?"></textarea>
+                </label>
+                <button class="button button-positive button-block">Adopt</button>
+              </div>
+            </content>
+          </tab>
+
+          <!-- Home tab -->
+          <tab title="About" icon="icon ion-search">
+            <content has-header="true" has-tabs="true" padding="true">
+              <h3>About this app</h3>
+              <p>
+                This is a sample seed project for the Ionic Framework. Please change it to match your needs.
+              </p>
+            </content>
+          </tab>
+
+        </tabs>
+      </nav-page>
+    </script>
+    <script id="pet.html" type="text/ng-template">
+      <nav-page title="pet.title" ng-controller="PetCtrl">
+      </nav-page>
+    </script>
+    <script id="page2.html" type="text/ng-template">
+      <nav-page title="'Beets'">
+        <h1>Page 2</h1>
+        <a class="button button-pure" nav-back>Back</a>
+        <a class="button button-assertive" href="#/page3">Next</a>
+      </nav-page>
+    </script>
+    <script id="page3.html" type="text/ng-template">
+      <nav-page title="'Battlestar Galactica'">
+        <h1>Page 3</h1>
+        <a class="button button-pure" nav-back>Back</a>
+      </nav-page>
+    </script>
+    <script>
+      angular.module('navTest', ['ionic'])
+
+
+      .config(function($routeProvider, $locationProvider) {
+        $routeProvider.when('/', {
+          templateUrl: 'page1.html',
+          controller: 'Page1Ctrl'
+        });
+
+        $routeProvider.when('/page2', {
+          templateUrl: 'page2.html',
+        });
+
+        $routeProvider.when('/page3', {
+          templateUrl: 'page3.html',
+        });
+
+        $routeProvider.when('/pet/:petId', {
+          templateUrl: 'pet.html',
+          controller: 'PetCtrl'
+        });
+        
+
+        // configure html5 to get links working on jsfiddle
+        //$locationProvider.html5Mode(true);
+
+      })
+
+      .controller('Page1Ctrl', function($scope) {
+        $scope.num = Math.floor(Math.random() * 100);
+      })
+
+      .controller('PetsCtrl', function($scope, $routeParams) {
+        $scope.pets = [
+          { id: 1, title: 'Cat', description: 'Furry little feline' }
+        ];
+      })
+
+      .controller('PetCtrl', function($scope, $routeParams) {
+        $scope.pet = {
+          title: 'Cat'
+          }
+      })
+
+      .controller('AdoptCtrl', function($scope) {
+        $scope.buttons = [
+          { text: 'Adopt' }
+        ];
+      });
+
+      
+    </script>
+  </body>
+</html>
diff --git a/scss/_animations.scss b/scss/_animations.scss
index 7e9c39b568..e0431c3a84 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -384,7 +384,6 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
     -webkit-transition:all 250ms;
     -webkit-transition-timing-function: $ios7-timing-function;
-    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
     transition:all 250ms;
     transition-timing-function: $ios7-timing-function;
     opacity: 1;
@@ -408,7 +407,6 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
     > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
       -webkit-transition:all 250ms;
       -webkit-transition-timing-function: $ios7-timing-function;
-      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
       transition:all 250ms;
       transition-timing-function: $ios7-timing-function;
       opacity: 1;

From 4586516e0ecb7b70c49305eb07618b686790dd20 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 19 Nov 2013 15:51:04 -0600
Subject: [PATCH 09/10] Button click support

---
 dist/js/ionic-angular.js                       | 13 ++++++++-----
 js/ext/angular/src/directive/ionicNavRouter.js | 11 +++++++----
 js/ext/angular/src/directive/ionicTabBar.js    |  2 +-
 js/ext/angular/test/navAndTabs.html            | 10 ++++++++--
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index fe0c1dd761..90fa8f17b9 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -25430,11 +25430,11 @@ angular.module('ionic.ui.navRouter', [])
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
         '<div class="buttons"> ' +
           '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
-          '<button ng-repeat="button in leftButtons" class="button" ng-bind="button.text"></button>' + 
+          '<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" class="button {{button.type}}" ng-bind="button.text"></button>' + 
         '</div>' +
         '<h1 class="title" ng-bind="currentTitle"></h1>' + 
         '<div class="buttons"> ' +
-          '<button ng-repeat="button in rightButtons" class="button" ng-bind="button.text"></button>' + 
+          '<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" class="button {{button.type}}" ng-bind="button.text"></button>' + 
         '</div>' +
       '</header>',
     link: function($scope, $element, $attr, navCtrl) {
@@ -25478,7 +25478,10 @@ angular.module('ionic.ui.navRouter', [])
 
         var oldTitle = $scope.currentTitle;
         $scope.oldTitle = oldTitle;
-        $scope.currentTitle = data.title;
+
+        if(typeof data.title !== 'undefined') {
+          $scope.currentTitle = data.title;
+        }
 
         if(typeof data.leftButtons !== 'undefined') {
           $scope.leftButtons = data.leftButtons;
@@ -25490,7 +25493,7 @@ angular.module('ionic.ui.navRouter', [])
           $scope.enableBackButton = data.hideBackButton !== true;
         }
 
-        if(data.animate !== false) {
+        if(data.animate !== false && typeof data.title !== 'undefined') {
           animate($scope, $element, oldTitle, data, function() {
             hb.align();
           });
@@ -26041,7 +26044,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
                     rightButtons: $scope.rightButtons,
                     leftButtons: $scope.leftButtons,
                     hideBackButton: $scope.hideBackButton || false,
-                    animate: $scope.animate || false
+                    animate: $scope.animate || true
                   });
                 }
                 //$scope.$emit('navRouter.titleChanged', $scope.title);
diff --git a/js/ext/angular/src/directive/ionicNavRouter.js b/js/ext/angular/src/directive/ionicNavRouter.js
index 0a7fce1c69..fdc0fd9b20 100644
--- a/js/ext/angular/src/directive/ionicNavRouter.js
+++ b/js/ext/angular/src/directive/ionicNavRouter.js
@@ -167,11 +167,11 @@ angular.module('ionic.ui.navRouter', [])
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
         '<div class="buttons"> ' +
           '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
-          '<button ng-repeat="button in leftButtons" class="button" ng-bind="button.text"></button>' + 
+          '<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" class="button {{button.type}}" ng-bind="button.text"></button>' + 
         '</div>' +
         '<h1 class="title" ng-bind="currentTitle"></h1>' + 
         '<div class="buttons"> ' +
-          '<button ng-repeat="button in rightButtons" class="button" ng-bind="button.text"></button>' + 
+          '<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" class="button {{button.type}}" ng-bind="button.text"></button>' + 
         '</div>' +
       '</header>',
     link: function($scope, $element, $attr, navCtrl) {
@@ -215,7 +215,10 @@ angular.module('ionic.ui.navRouter', [])
 
         var oldTitle = $scope.currentTitle;
         $scope.oldTitle = oldTitle;
-        $scope.currentTitle = data.title;
+
+        if(typeof data.title !== 'undefined') {
+          $scope.currentTitle = data.title;
+        }
 
         if(typeof data.leftButtons !== 'undefined') {
           $scope.leftButtons = data.leftButtons;
@@ -227,7 +230,7 @@ angular.module('ionic.ui.navRouter', [])
           $scope.enableBackButton = data.hideBackButton !== true;
         }
 
-        if(data.animate !== false) {
+        if(data.animate !== false && typeof data.title !== 'undefined') {
           animate($scope, $element, oldTitle, data, function() {
             hb.align();
           });
diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js
index 5a3795cd34..8e783b5624 100644
--- a/js/ext/angular/src/directive/ionicTabBar.js
+++ b/js/ext/angular/src/directive/ionicTabBar.js
@@ -138,7 +138,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
                     rightButtons: $scope.rightButtons,
                     leftButtons: $scope.leftButtons,
                     hideBackButton: $scope.hideBackButton || false,
-                    animate: $scope.animate || false
+                    animate: $scope.animate || true
                   });
                 }
                 //$scope.$emit('navRouter.titleChanged', $scope.title);
diff --git a/js/ext/angular/test/navAndTabs.html b/js/ext/angular/test/navAndTabs.html
index 0f3346fdce..ced699a4cd 100644
--- a/js/ext/angular/test/navAndTabs.html
+++ b/js/ext/angular/test/navAndTabs.html
@@ -17,7 +17,7 @@
     </pane>
 
     <script id="page1.html" type="text/ng-template">
-      <nav-page title="'Pets'" hide-back-button="true">
+      <nav-page hide-back-button="true">
         <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
 
           <!-- Pets tab -->
@@ -133,7 +133,13 @@
 
       .controller('AdoptCtrl', function($scope) {
         $scope.buttons = [
-          { text: 'Adopt' }
+        { 
+          text: 'Adopt',
+          tap: function(e) {
+            console.log('ADOPT TAPPED');
+          },
+          type: 'button-clear'
+        }
         ];
       });
 

From a8947355b9f122aacdb4e14725019e23c2d41695 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 19 Nov 2013 16:04:30 -0600
Subject: [PATCH 10/10] Way too basic of a test, but it's a first stab

---
 ionic.conf.js                                 |  5 -----
 .../test/directive/ionicNavRouter.unit.js     | 19 +++++++++++++++++++
 2 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 js/ext/angular/test/directive/ionicNavRouter.unit.js

diff --git a/ionic.conf.js b/ionic.conf.js
index 5c6911ab3b..8e40a2fb25 100644
--- a/ionic.conf.js
+++ b/ionic.conf.js
@@ -17,11 +17,6 @@ module.exports = function(config) {
       // Include jQuery only for testing convience (lots of DOM checking for unit tests on directives)
       'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
 
-      'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js',
-      'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-mocks.js',
-      'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js',
-      'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js',
-
       'dist/js/ionic.js',
       'dist/js/ionic-angular.js',
 
diff --git a/js/ext/angular/test/directive/ionicNavRouter.unit.js b/js/ext/angular/test/directive/ionicNavRouter.unit.js
new file mode 100644
index 0000000000..2ae205c477
--- /dev/null
+++ b/js/ext/angular/test/directive/ionicNavRouter.unit.js
@@ -0,0 +1,19 @@
+describe('Angular Ionic Nav Router', function() {
+  var modal, q;
+
+  beforeEach(module('ngRoute'));
+  beforeEach(module('ionic.ui.navRouter'));
+
+  beforeEach(inject(function($compile, $rootScope, $controller) {
+    compile = $compile;
+    scope = $rootScope;
+  }));
+
+  iit('Should init', function() {
+    element = compile('<pane nav-router>' +
+      '<nav-bar></nav-bar>' +
+      '<ng-view></ng-view>' +
+    '</pane>')(scope);
+
+  });
+});