diff --git a/js/ext/angular/test/anchorScroll.html b/js/ext/angular/test/anchorScroll.html
index 743f5719a1..105f51d377 100644
--- a/js/ext/angular/test/anchorScroll.html
+++ b/js/ext/angular/test/anchorScroll.html
@@ -13,12 +13,12 @@
   <body>
 
     <div ng-controller="MyCtrl">
-      <header class="bar bar-header bar-positive">
+      <ion-header-bar class="bar-positive">
         <div class="buttons">
           <button class="button button-icon icon ion-clock" ng-click="doScroll()"></button>
         </div>
         <h1 class="title">Click the Clock to Get Stuck</h1>
-      </header>
+      </ion-header-bar>
 
       <ion-content class="has-header">
 
diff --git a/js/ext/angular/test/carousel.html b/js/ext/angular/test/carousel.html
index 844e5449f2..65438ddb55 100644
--- a/js/ext/angular/test/carousel.html
+++ b/js/ext/angular/test/carousel.html
@@ -84,61 +84,8 @@
           console.log('NEXT');
           $scope.$broadcast('slideBox.nextSlide');
         };
-
-        var rightButtons = [
-          {
-            content: 'Next',
-            type: 'button-positive button-clear',
-            tap: function(e) {
-              console.log('NEXT');
-              $scope.next();
-            }
-          }
-        ];
-        var leftButtons = [
-          {
-            content: 'Skip',
-            type: 'button-positive button-clear',
-            tap: function(e) {
-              alert('Skipping');
-            }
-          }
-        ];
-
-        $scope.leftButtons = leftButtons;
-        $scope.rightButtons = rightButtons;
-
-
         $scope.slideChanged = function(index) {
           console.log('Slide changed', index);
-
-          if(index > 0) {
-            $scope.leftButtons = [
-              {
-                content: 'Back',
-                type: 'button-positive button-clear',
-                tap: function(e) {
-                  $scope.$broadcast('slideBox.prevSlide');
-                }
-              }
-            ];
-          } else {
-            $scope.leftButtons = leftButtons;
-          }
-
-          if(index == 2) {
-            $scope.rightButtons = [
-              {
-                content: 'Start using MyApp',
-                type: 'button-positive button-clear',
-                tap: function(e) {
-                  alert('Done!');
-                }
-              }
-            ];
-          } else {
-            $scope.rightButtons = rightButtons;
-          }
         };
       });
     </script>
diff --git a/js/ext/angular/test/content.html b/js/ext/angular/test/content.html
index 0997e19dfa..0afdbc912b 100644
--- a/js/ext/angular/test/content.html
+++ b/js/ext/angular/test/content.html
@@ -55,7 +55,9 @@
   </head>
   <body ng-controller="ThisCtrl">
     <ion-pane>
-      <ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar>
+      <ion-header-bar id="header" class="bar-primary">>
+        <h1 class="title">Title</h1>
+      </ion-header-bar>
 
       <ion-content id="container"
         start-y="55"
diff --git a/js/ext/angular/test/content_defer.html b/js/ext/angular/test/content_defer.html
index 22d4f589cd..90e11cb086 100644
--- a/js/ext/angular/test/content_defer.html
+++ b/js/ext/angular/test/content_defer.html
@@ -11,7 +11,9 @@
   </head>
   <body ng-controller="ThisCtrl">
     <ion-pane>
-      <ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar>
+      <ion-header-bar id="header" class="bar-primary">>
+        <h1 class="title">Title</h1>
+      </ion-header-bar>
 
       <ion-content id="container"
         on-scroll="onScroll(event, scrollTop, scrollLeft)"
diff --git a/js/ext/angular/test/content_h.html b/js/ext/angular/test/content_h.html
index 79f712e50d..d15e487c4e 100644
--- a/js/ext/angular/test/content_h.html
+++ b/js/ext/angular/test/content_h.html
@@ -50,7 +50,9 @@
   </head>
   <body ng-controller="ThisCtrl">
     <ion-pane>
-      <ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar>
+      <ion-header-bar id="header" class="bar-primary">>
+        <h1 class="title">Title</h1>
+      </ion-header-bar>
 
       <ion-content id="container"
         has-scroll-x="true"
diff --git a/js/ext/angular/test/embeddedObject.html b/js/ext/angular/test/embeddedObject.html
index 98312c9eb9..52fe3f56b7 100644
--- a/js/ext/angular/test/embeddedObject.html
+++ b/js/ext/angular/test/embeddedObject.html
@@ -55,7 +55,9 @@
   </head>
   <body>
     <ion-pane>
-      <ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar>
+      <ion-header-bar id="header" class="bar-primary">
+        <h1 class="title">Title</h1>
+      </ion-header-bar>
 
       <ion-content id="container" padding="true">
            <object width="560" height="315">
diff --git a/js/ext/angular/test/header.html b/js/ext/angular/test/header.html
index abc13ca637..16858916fd 100644
--- a/js/ext/angular/test/header.html
+++ b/js/ext/angular/test/header.html
@@ -9,37 +9,29 @@
     <script src="../../../../dist/js/ionic.bundle.js"></script>
   </head>
   <body ng-controller="TestCtrl">
-    <ion-header-bar
-      title="headerTitle"
-      left-buttons="leftButtons"
-      right-buttons="rightButtons"
-      type="bar-primary"></ion-header-bar>
-    <ion-header-bar type="bar-positive" title="headerTitle" left-buttons="leftButtons" right-buttons="rightButtons"></ion-header-bar>
-
-    <ion-content>
-      <input type="text" ng-model="headerTitle">
+    <ion-header-bar class="bar-positive" model="barController">
+      <div class="buttons">
+        <button class="button">
+          Hello <b>Hello</b>
+        </button>
+      </div>
+      <h1 class="title">{{headerTitle}}</h1>
+      <div class="buttons">
+        <button class="button">
+          Farewell!
+        </button>
+      </div>
+    </ion-header-bar>
+    <ion-content class="has-header">
+      <input type="text" ng-model="$parent.headerTitle">
+      <br/>
+      <input type="text" ng-model="$parent.align">
     </ion-content>
     <script>
       angular.module('headerTest', ['ionic'])
 
       .controller('TestCtrl', function($scope) {
-          $scope.headerTitle = 'A really really <u>really</u> really really long title here';
-        $scope.leftButtons = [
-          {
-content: 'Hello <b>Hello</b>',
-            tap: function(e) {
-              console.log('Click button');
-            }
-          }
-        ]
-        $scope.rightButtons = [
-          {
-            content: 'Hello',
-            tap: function(e) {
-              console.log('Click button');
-            }
-          }
-        ]
+        $scope.headerTitle = 'A really really <u>really</u> really really long title here';
       });
       var midPoint = window.clientWidth / 2;
       var box = document.createElement('div');
@@ -54,8 +46,8 @@ content: 'Hello <b>Hello</b>',
       box.style.marginLeft = '-1px';
       document.body.appendChild(box);
       window.onresize = function() {
-        var s = angular.element(document.getElementsByTagName('header')[0]).isolateScope();
-        s.headerBarView.align();
+        var s = angular.element(document.getElementsByTagName('header')[0]).scope();
+        s.barController.align(s.align);
       };
     </script>
   </body>
diff --git a/js/ext/angular/test/history.html b/js/ext/angular/test/history.html
index 31cdbb4548..618fecbfe8 100644
--- a/js/ext/angular/test/history.html
+++ b/js/ext/angular/test/history.html
@@ -7,18 +7,21 @@
 </head>
 
 <body ng-app="starter" animation="slide-left-right-ios7">
-  <ion-nav-bar type="bar-light" animation="nav-title-slide-ios7" back-button-type="button-icon button-clear" back-button-icon="ion-ios7-arrow-back" back-button-label="Back"></ion-nav-bar>
+  <ion-nav-bar type="bar-light" animation="nav-title-slide-ios7">
+    <ion-nav-back-button class="button-icon button-clear ion-ios7-arrow-back">
+    </ion-nav-back-button>
+  </ion-nav-bar>
 
   <ion-nav-view></ion-nav-view>
 
   <script>
     angular.module('starter', ['ionic', 'starter.services', 'starter.controllers'])
     .run(function($templateCache){
-      $templateCache.put("templates/about.html","<ion-view title=\"'About Ionic'\"><ion-content has-header=\"true\" has-tabs=\"true\" padding=\"true\"></ion-content></ion-view>");
+      $templateCache.put("templates/about.html","<ion-view title='About Ionic'><ion-content has-header='true' has-tabs='true' padding='true'></ion-content></ion-view>");
 
-      $templateCache.put("templates/tabs.html","<ion-tabs tabs-style=\"tabs-icon-top\" tabs-type=\"tabs-default\"><ion-tab title=\"Pets\" icon=\"icon ion-home\" href=\"#/tab/pets\"><ion-nav-view name=\"pets-tab\"></ion-nav-view></ion-tab><ion-tab title=\"About\" icon=\"icon ion-search\" href=\"#/tab/about\"><ion-nav-view name=\"about-tab\"></ion-nav-view></ion-tab></ion-tabs>");
-      $templateCache.put("templates/pet-index.html","<ion-view title=\"'Pet Information'\"><ion-content has-header=\"true\" has-tabs=\"true\"><div class=\"list\"><a class=\"item item-thumbnail-left\" ng-repeat=\"pet in pets\" ng-href=\"#/tab/pet/{{pet.id}}\" ><img ng-src=\"{{pet.thumbnail}}\"><h3>{{pet.title}}</h3><p>{{pet.description}}</p></a></div></ion-content></ion-view>");
-      $templateCache.put("templates/pet-detail.html","<ion-view title=\"pet.title\" right-buttons=\"rightButtons\"><ion-content has-header=\"true\" padding=\"true\"><p>{{ pet.description }}</p><p><a class=\"button button-small icon ion-arrow-left-b\" href=\"#/tab/pets\"> All Pets</a></p><button class=\"button button-small\" ng-click=\"clearViewHistories()\">clearViewHistories</button><button class=\"button button-small\" ng-click=\"historyConsole()\">Console Log</button><pre>{{ $viewHistory | json }}</pre></ion-content></ion-view>");
+      $templateCache.put("templates/tabs.html","<ion-tabs tabs-style='tabs-icon-top' tabs-type='tabs-default'><ion-tab title='Pets' icon='icon ion-home' href='#/tab/pets'><ion-nav-view name='pets-tab'></ion-nav-view></ion-tab><ion-tab title='About' icon='icon ion-search' href='#/tab/about'><ion-nav-view name='about-tab'></ion-nav-view></ion-tab></ion-tabs>");
+      $templateCache.put("templates/pet-index.html","<ion-view title='Pet Information'><ion-content has-header='true' has-tabs='true'><div class='list'><a class='item item-thumbnail-left' ng-repeat='pet in pets' ng-href='#/tab/pet/{{pet.id}}' ><img ng-src='{{pet.thumbnail}}'><h3>{{pet.title}}</h3><p>{{pet.description}}</p></a></div></ion-content></ion-view>");
+      $templateCache.put("templates/pet-detail.html","<ion-view title='{{pet.title}}'><ion-content has-header='true' padding='true'><p>{{ pet.description }}</p><p><a class='button button-small icon ion-arrow-left-b' href='#/tab/pets'> All Pets</a></p><button class='button button-small' ng-click='clearViewHistories()'>clearViewHistories</button><button class='button button-small' ng-click='historyConsole()'>Console Log</button><pre>{{ $viewHistory | json }}</pre></ion-content></ion-view>");
 
     })
     .config(function($stateProvider, $urlRouterProvider) {
diff --git a/js/ext/angular/test/list-fit.html b/js/ext/angular/test/list-fit.html
index 593305b952..8593af88a5 100644
--- a/js/ext/angular/test/list-fit.html
+++ b/js/ext/angular/test/list-fit.html
@@ -12,17 +12,14 @@
 
   <body>
 
-    <ion-header-bar class="bar-positive" is-subheader="{{$root.isSub}}">
+    <ion-header-bar class="bar-positive" ng-class="{'bar-subheader': $root.isSub}">
       <h1 class="title">Header!</h1>
     </ion-header-bar>
 
-    <ion-content scroll="true" ng-controller="ContentCtrl" padding="false">
+    <ion-content scroll="true" ng-controller="ContentCtrl" padding="false" has-header="true" ng-class="{'has-subheader': $root.isSub}">
 
       <ion-refresher on-refresh="onRefresh()" pulling-text="pull!" refreshing-text="refreshing!"></ion-refresher>
 
-      <pre>{{$$contentState | json}}</pre>
-      <pre>{{$$contentState.getClassName()}}</pre>
-
       <ion-checkbox ng-model="$root.isSub">isSub</ion-checkbox>
 
       <ul class="list">
