diff --git a/js/ext/angular/src/directive/ionicActionSheet.js b/js/ext/angular/src/directive/ionicActionSheet.js
index f1d131ad76..f520d1cf1c 100644
--- a/js/ext/angular/src/directive/ionicActionSheet.js
+++ b/js/ext/angular/src/directive/ionicActionSheet.js
@@ -3,7 +3,7 @@
 
 angular.module('ionic.ui.actionSheet', [])
 
-.directive('actionSheet', ['$document', function($document) {
+.directive('ionActionSheet', ['$document', function($document) {
   return {
     restrict: 'E',
     scope: true,
diff --git a/js/ext/angular/src/directive/ionicBar.js b/js/ext/angular/src/directive/ionicBar.js
index 01492358f6..4bea85256f 100644
--- a/js/ext/angular/src/directive/ionicBar.js
+++ b/js/ext/angular/src/directive/ionicBar.js
@@ -13,19 +13,19 @@ angular.module('ionic.ui.header', ['ngAnimate'])
   };
 }])
 
-.directive('headerBar', ['$ionicScrollDelegate', function($ionicScrollDelegate) {
+.directive('ionHeaderBar', ['$ionicScrollDelegate', function($ionicScrollDelegate) {
   return {
     restrict: 'E',
     replace: true,
     transclude: true,
     template: '<header class="bar bar-header">\
                 <div class="buttons">\
-                  <button ng-repeat="button in leftButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" bind-html-unsafe="button.content">\
+                  <button ng-repeat="button in leftButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ion-bind-html-unsafe="button.content">\
                   </button>\
                 </div>\
-                <h1 class="title" bind-html-unsafe="title"></h1>\
+                <h1 class="title" ion-bind-html-unsafe="title"></h1>\
                 <div class="buttons">\
-                  <button ng-repeat="button in rightButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" bind-html-unsafe="button.content">\
+                  <button ng-repeat="button in rightButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ion-bind-html-unsafe="button.content">\
                   </button>\
                 </div>\
               </header>',
@@ -66,7 +66,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
   };
 }])
 
-.directive('footerBar', function() {
+.directive('ionFooterBar', function() {
   return {
     restrict: 'E',
     replace: true,
diff --git a/js/ext/angular/src/directive/ionicBindHtml.js b/js/ext/angular/src/directive/ionicBindHtml.js
index d8460f71fe..32b583f438 100644
--- a/js/ext/angular/src/directive/ionicBindHtml.js
+++ b/js/ext/angular/src/directive/ionicBindHtml.js
@@ -1,8 +1,8 @@
 angular.module('ionic.ui.bindHtml', [])
-.directive('bindHtmlUnsafe', function () {
+.directive('ionBindHtmlUnsafe', function () {
   return function (scope, element, attr) {
-    element.addClass('ng-binding').data('$binding', attr.bindHtmlUnsafe);
-    scope.$watch(attr.bindHtmlUnsafe, function(value) {
+    element.addClass('ng-binding').data('$binding', attr.ionBindHtmlUnsafe);
+    scope.$watch(attr.ionBindHtmlUnsafe, function(value) {
       element.html(value || '');
     });
   };
diff --git a/js/ext/angular/src/directive/ionicCheckbox.js b/js/ext/angular/src/directive/ionicCheckbox.js
index 053c9c98c6..c9d05834f7 100644
--- a/js/ext/angular/src/directive/ionicCheckbox.js
+++ b/js/ext/angular/src/directive/ionicCheckbox.js
@@ -4,7 +4,7 @@
 angular.module('ionic.ui.checkbox', [])
 
 
-.directive('checkbox', function() {
+.directive('ionCheckbox', function() {
   return {
     restrict: 'E',
     replace: true,
diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
index 0012e6f847..f69f187d69 100644
--- a/js/ext/angular/src/directive/ionicContent.js
+++ b/js/ext/angular/src/directive/ionicContent.js
@@ -7,7 +7,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
  * Panel is a simple 100% width and height, fixed panel. It's meant for content to be
  * added to it, or animated around.
  */
-.directive('pane', function() {
+.directive('ionPane', function() {
   return {
     restrict: 'E',
     link: function(scope, element, attr) {
@@ -18,13 +18,13 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
 
 // The content directive is a core scrollable content area
 // that is part of many View hierarchies
-.directive('content', ['$parse', '$timeout', '$ionicScrollDelegate', '$controller', function($parse, $timeout, $ionicScrollDelegate, $controller) {
+.directive('ionContent', ['$parse', '$timeout', '$ionicScrollDelegate', '$controller', function($parse, $timeout, $ionicScrollDelegate, $controller) {
   return {
     restrict: 'E',
     replace: true,
     template: '<div class="scroll-content"><div class="scroll" ng-transclude></div></div>',
     transclude: true,
-    require: '^?navView',
+    require: '^?ionNavView',
     scope: {
       onRefresh: '&',
       onRefreshOpening: '&',
@@ -53,7 +53,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
       if(attr.padding == "true") { element.find('div').addClass('padding'); }
 
       return {
-        //Prelink <content> so it can compile before other directives compile.
+        //Prelink <ion-content> so it can compile before other directives compile.
         //Then other directives can require ionicScrollCtrl
         pre: prelink
       };
@@ -158,17 +158,17 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
   };
 }])
 
-.directive('refresher', function() {
+.directive('ionRefresher', function() {
   return {
     restrict: 'E',
     replace: true,
-    require: ['^?content', '^?list'],
+    require: ['^?ionContent', '^?ionList'],
     template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-d icon-refreshing"></i></div></div>',
     scope: true
   };
 })
 
-.directive('scrollRefresher', function() {
+.directive('ionScrollRefresher', function() {
   return {
     restrict: 'E',
     replace: true,
@@ -177,7 +177,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
   };
 })
 
-.directive('infiniteScroll', function() {
+.directive('ionInfiniteScroll', function() {
   return {
     restrict: 'E',
     replace: false,
diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js
index f3e0cf6d3b..704ee123ed 100644
--- a/js/ext/angular/src/directive/ionicList.js
+++ b/js/ext/angular/src/directive/ionicList.js
@@ -3,10 +3,10 @@
 
 angular.module('ionic.ui.list', ['ngAnimate'])
 
-.directive('item', ['$timeout', '$parse', function($timeout, $parse) {
+.directive('ionItem', ['$timeout', '$parse', function($timeout, $parse) {
   return {
     restrict: 'E',
-    require: '?^list',
+    require: '?^ionList',
     replace: true,
     transclude: true,
 
@@ -24,14 +24,14 @@ angular.module('ionic.ui.list', ['ngAnimate'])
 
     template: '<div class="item item-complex">\
             <div class="item-edit" ng-if="deleteClick !== undefined">\
-              <button class="button button-icon icon" ng-class="deleteIconClass" ng-click="deleteClick()" stop-event="click"></button>\
+              <button class="button button-icon icon" ng-class="deleteIconClass" ng-click="deleteClick()" ion-stop-event="click"></button>\
             </div>\
             <a class="item-content" ng-href="{{ href }}" ng-transclude></a>\
             <div class="item-drag" ng-if="reorderIconClass !== undefined">\
               <button data-ionic-action="reorder" class="button button-icon icon" ng-class="reorderIconClass"></button>\
             </div>\
             <div class="item-options" ng-if="itemOptionButtons">\
-             <button ng-click="b.onTap(item, b)" stop-event="click" class="button" ng-class="b.type" ng-repeat="b in itemOptionButtons" ng-bind="b.text"></button>\
+             <button ng-click="b.onTap(item, b)" ion-stop-event="click" class="button" ng-class="b.type" ng-repeat="b in itemOptionButtons" ng-bind="b.text"></button>\
            </div>\
           </div>',
 
@@ -95,7 +95,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
   };
 }])
 
-.directive('list', ['$timeout', function($timeout) {
+.directive('ionList', ['$timeout', function($timeout) {
   return {
     restrict: 'E',
     replace: true,
diff --git a/js/ext/angular/src/directive/ionicLoading.js b/js/ext/angular/src/directive/ionicLoading.js
index 927c017acc..712af9cfb1 100644
--- a/js/ext/angular/src/directive/ionicLoading.js
+++ b/js/ext/angular/src/directive/ionicLoading.js
@@ -3,7 +3,7 @@
 
 angular.module('ionic.ui.loading', [])
 
-.directive('loading', function() {
+.directive('ionLoading', function() {
   return {
     restrict: 'E',
     replace: true,
diff --git a/js/ext/angular/src/directive/ionicRadio.js b/js/ext/angular/src/directive/ionicRadio.js
index e9903f93cd..8a5fd99890 100644
--- a/js/ext/angular/src/directive/ionicRadio.js
+++ b/js/ext/angular/src/directive/ionicRadio.js
@@ -5,7 +5,7 @@ angular.module('ionic.ui.radio', [])
 
 // The radio button is a radio powered element with only
 // one possible selection in a set of options.
-.directive('radio', function() {
+.directive('ionRadio', function() {
   return {
     restrict: 'E',
     replace: true,
@@ -33,7 +33,7 @@ angular.module('ionic.ui.radio', [])
 
 // The radio button is a radio powered element with only
 // one possible selection in a set of options.
-.directive('radioButtons', function() {
+.directive('ionRadioButtons', function() {
   return {
     restrict: 'E',
     replace: true,
@@ -76,10 +76,10 @@ angular.module('ionic.ui.radio', [])
   };
 })
 
-.directive('buttonRadio', function() {
+.directive('ionButtonRadio', function() {
   return {
     restrict: 'CA',
-    require: ['?^ngModel', '?^radioButtons'],
+    require: ['?^ngModel', '?^ionRadioButtons'],
     link: function($scope, $element, $attr, ctrls) {
       var ngModel = ctrls[0];
       var radioButtons = ctrls[1];
diff --git a/js/ext/angular/src/directive/ionicScroll.js b/js/ext/angular/src/directive/ionicScroll.js
index d13ab8868f..44f856a9f3 100644
--- a/js/ext/angular/src/directive/ionicScroll.js
+++ b/js/ext/angular/src/directive/ionicScroll.js
@@ -3,7 +3,7 @@
 
 angular.module('ionic.ui.scroll', [])
 
-.directive('scroll', ['$parse', '$timeout', '$controller', function($parse, $timeout, $controller) {
+.directive('ionScroll', ['$parse', '$timeout', '$controller', function($parse, $timeout, $controller) {
   return {
     restrict: 'E',
     replace: true,
@@ -25,7 +25,7 @@ angular.module('ionic.ui.scroll', [])
     compile: function(element, attr, transclude) {
 
       return {
-        //Prelink <scroll> so it can compile before other directives compile.
+        //Prelink <ion-scroll> so it can compile before other directives compile.
         //Then other directives can require ionicScrollCtrl
         pre: prelink
       };
diff --git a/js/ext/angular/src/directive/ionicSideMenu.js b/js/ext/angular/src/directive/ionicSideMenu.js
index 17b79f6d22..bedcc036fb 100644
--- a/js/ext/angular/src/directive/ionicSideMenu.js
+++ b/js/ext/angular/src/directive/ionicSideMenu.js
@@ -20,7 +20,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
   $ionicViewService.disableRegisterByTagName('side-menus');
 }])
 
-.directive('sideMenus', function() {
+.directive('ionSideMenus', function() {
   return {
     restrict: 'ECA',
     controller: ['$scope', '$attrs', function($scope, $attrs) {
@@ -43,10 +43,10 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
   };
 })
 
-.directive('sideMenuContent', ['$timeout', '$ionicGesture', function($timeout, $ionicGesture) {
+.directive('ionSideMenuContent', ['$timeout', '$ionicGesture', function($timeout, $ionicGesture) {
   return {
     restrict: 'AC',
-    require: '^sideMenus',
+    require: '^ionSideMenus',
     scope: true,
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr, sideMenuCtrl) {
@@ -142,10 +142,10 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
 }])
 
 
-.directive('sideMenu', function() {
+.directive('ionSideMenu', function() {
   return {
     restrict: 'E',
-    require: '^sideMenus',
+    require: '^ionSideMenus',
     replace: true,
     transclude: true,
     scope: true,
diff --git a/js/ext/angular/src/directive/ionicSlideBox.js b/js/ext/angular/src/directive/ionicSlideBox.js
index 5627cb52c9..9f5251a6f5 100644
--- a/js/ext/angular/src/directive/ionicSlideBox.js
+++ b/js/ext/angular/src/directive/ionicSlideBox.js
@@ -13,7 +13,7 @@ angular.module('ionic.ui.slideBox', [])
  * The internal controller for the slide box controller.
  */
 
-.directive('slideBox', ['$timeout', '$compile', '$ionicSlideBoxDelegate', function($timeout, $compile, $ionicSlideBoxDelegate) {
+.directive('ionSlideBox', ['$timeout', '$compile', '$ionicSlideBoxDelegate', function($timeout, $compile, $ionicSlideBoxDelegate) {
   return {
     restrict: 'E',
     replace: true,
@@ -93,7 +93,7 @@ angular.module('ionic.ui.slideBox', [])
       // If the pager should show, append it to the slide box
       if($scope.$eval($scope.showPager) !== false) {
         var childScope = $scope.$new();
-        var pager = angular.element('<pager></pager>');
+        var pager = angular.element('<ion-pager></ion-pager>');
         $element.append(pager);
         $compile(pager)(childScope);
       }
@@ -101,10 +101,10 @@ angular.module('ionic.ui.slideBox', [])
   };
 }])
 
-.directive('slide', function() {
+.directive('ionSlide', function() {
   return {
     restrict: 'E',
-    require: '^slideBox',
+    require: '^ionSlideBox',
     compile: function(element, attr) {
       element.addClass('slider-slide');
       return function($scope, $element, $attr) {};
@@ -112,11 +112,11 @@ angular.module('ionic.ui.slideBox', [])
   };
 })
 
-.directive('pager', function() {
+.directive('ionPager', function() {
   return {
     restrict: 'E',
     replace: true,
-    require: '^slideBox',
+    require: '^ionSlideBox',
     template: '<div class="slider-pager"><span class="slider-pager-page" ng-repeat="slide in numSlides() track by $index" ng-class="{active: $index == currentSlide}"><i class="icon ion-record"></i></span></div>',
     link: function($scope, $element, $attr, slideBox) {
       var selectPage = function(index) {
diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js
index 8c16f667a9..d6552270a0 100644
--- a/js/ext/angular/src/directive/ionicTabBar.js
+++ b/js/ext/angular/src/directive/ionicTabBar.js
@@ -9,7 +9,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
 
 .run(['$ionicViewService', function($ionicViewService) {
   // set that the tabs directive should not animate when transitioning
-  // to it. Instead, the children <tab> directives would animate
+  // to it. Instead, the children <ion-tab> directives would animate
   $ionicViewService.disableRegisterByTagName('tabs');
 }])
 
@@ -94,14 +94,14 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
 
 }])
 
-.directive('tabs', ['$ionicViewService', function($ionicViewService) {
+.directive('ionTabs', ['$ionicViewService', function($ionicViewService) {
   return {
     restrict: 'E',
     replace: true,
     scope: true,
     transclude: true,
     controller: '$ionicTabs',
-    template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
+    template: '<div class="view"><ion-tab-controller-bar></ion-tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function link($scope, $element, $attr) {
 
@@ -141,10 +141,10 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
 }])
 
 // Generic controller directive
-.directive('tab', ['$ionicViewService', '$rootScope', '$parse', '$interpolate', function($ionicViewService, $rootScope, $parse, $interpolate) {
+.directive('ionTab', ['$ionicViewService', '$rootScope', '$parse', '$interpolate', function($ionicViewService, $rootScope, $parse, $interpolate) {
   return {
     restrict: 'E',
-    require: '^tabs',
+    require: '^ionTabs',
     scope: true,
     transclude: 'element',
     compile: function(element, attr, transclude) {
@@ -229,7 +229,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
 
         // on link, check if it has a nav-view in it
         transclude($scope.$new(), function(clone) {
-          var navViewEle = clone[0].getElementsByTagName("nav-view");
+          var navViewEle = clone[0].getElementsByTagName("ion-nav-view");
           $scope.hasNavView = (navViewEle.length > 0);
           if($scope.hasNavView) {
             // this tab has a ui-view
@@ -256,15 +256,15 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
 }])
 
 
-.directive('tabControllerBar', function() {
+.directive('ionTabControllerBar', function() {
   return {
     restrict: 'E',
-    require: '^tabs',
+    require: '^ionTabs',
     transclude: true,
     replace: true,
     scope: true,
     template: '<div class="tabs">' +
-      '<tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" badge="c.badge" badge-style="c.badgeStyle" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
+      '<ion-tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" badge="c.badge" badge-style="c.badgeStyle" active="c.isVisible" index="$index" ng-repeat="c in controllers"></ion-tab-controller-item>' +
     '</div>',
     link: function($scope, $element, $attr, tabsCtrl) {
       $element.addClass($scope.tabsType);
@@ -273,11 +273,11 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
   };
 })
 
-.directive('tabControllerItem', ['$window', function($window) {
+.directive('ionTabControllerItem', ['$window', function($window) {
   return {
     restrict: 'E',
     replace: true,
-    require: '^tabs',
+    require: '^ionTabs',
     scope: {
       iconTitle: '@',
       icon: '@',
@@ -304,7 +304,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
         '<i class="icon {{icon}}" ng-if="icon"></i>' +
         '<i class="{{iconOn}}" ng-if="active"></i>' +
         '<i class="{{iconOff}}" ng-if="!active"></i>' +
-        '<span bind-html-unsafe="iconTitle"></span>' +
+        '<span ion-bind-html-unsafe="iconTitle"></span>' +
       '</a>'
   };
 }]);
diff --git a/js/ext/angular/src/directive/ionicToggle.js b/js/ext/angular/src/directive/ionicToggle.js
index 93f2f130cd..6c217027da 100644
--- a/js/ext/angular/src/directive/ionicToggle.js
+++ b/js/ext/angular/src/directive/ionicToggle.js
@@ -5,7 +5,7 @@ angular.module('ionic.ui.toggle', [])
 
 // The Toggle directive is a toggle switch that can be tapped to change
 // its value
-.directive('toggle', function() {
+.directive('ionToggle', function() {
 
   return {
     restrict: 'E',
diff --git a/js/ext/angular/src/directive/ionicTouch.js b/js/ext/angular/src/directive/ionicTouch.js
index ae428666df..6feca524f3 100644
--- a/js/ext/angular/src/directive/ionicTouch.js
+++ b/js/ext/angular/src/directive/ionicTouch.js
@@ -47,14 +47,14 @@ angular.module('ionic.ui.touch', [])
 
   }])
 
-  .directive('stopEvent', function () {
+  .directive('ionStopEvent', function () {
     function stopEvent(e) {
       e.stopPropagation();
     }
     return {
       restrict: 'A',
       link: function (scope, element, attr) {
-        element.bind(attr.stopEvent, stopEvent);
+        element.bind(attr.ionStopEvent, stopEvent);
       }
     };
   });
diff --git a/js/ext/angular/src/directive/ionicViewState.js b/js/ext/angular/src/directive/ionicViewState.js
index c6ac6050c2..f6256417a2 100644
--- a/js/ext/angular/src/directive/ionicViewState.js
+++ b/js/ext/angular/src/directive/ionicViewState.js
@@ -22,7 +22,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
 /**
  * Our Nav Bar directive which updates as the controller state changes.
  */
-.directive('navBar', ['$ionicViewService', '$rootScope', '$animate', '$compile',
+.directive('ionNavBar', ['$ionicViewService', '$rootScope', '$animate', '$compile',
              function( $ionicViewService,   $rootScope,   $animate,   $compile) {
 
   return {
@@ -40,23 +40,21 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
     template:
     '<header class="bar bar-header nav-bar {{type}} {{isReverse ? \'reverse\' : \'\'}} ' +
     '{{isInvisible ? \'invisible\' : \'\'}} {{animateEnabled ? animation : \'\'}}">' +
-      '<nav-back-button ng-if="backButtonEnabled && (backType || backLabel || backIcon)" ' +
-        'type="backType" label="backLabel" icon="backIcon" class="invisible" async-visible>' +
-      '</nav-back-button>' +
+      '<ion-nav-back-button ng-if="backButtonEnabled && (backType || backLabel || backIcon)" ' +
+        'type="backType" label="backLabel" icon="backIcon" class="invisible" ion-async-visible>' +
+      '</ion-nav-back-button>' +
       '<div class="buttons left-buttons"> ' +
         '<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" ' +
-          'class="button no-animation {{button.type}}" ' +
-          'bind-html-unsafe="button.content">' +
+          'class="button no-animation {{button.type}}" ion-bind-html-unsafe="button.content">' +
         '</button>' +
       '</div>' +
 
       //ng-repeat makes it easy to add new / remove old and have proper enter/leave anims
-      '<h1 ng-repeat="title in titles" bind-html-unsafe="title" class="title invisible" async-visible nav-bar-title></h1>' +
+      '<h1 ng-repeat="title in titles" ion-bind-html-unsafe="title" class="title invisible" ion-async-visible ion-nav-bar-title></h1>' +
 
       '<div class="buttons right-buttons" ng-if="rightButtons.length"> ' +
       '<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" '+
-        'class="button no-animation {{button.type}}" ' +
-        'bind-html-unsafe="button.content">' +
+        'class="button no-animation {{button.type}}" ion-bind-html-unsafe="button.content">' +
         '</button>' +
       '</div>' +
     '</header>',
@@ -130,10 +128,10 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
   };
 }])
 
-.directive('navBarTitle', function() {
+.directive('ionNavBarTitle', function() {
   return {
     restrict: 'A',
-    require: '^navBar',
+    require: '^ionNavBar',
     link: function($scope, $element, $attr, navBarCtrl) {
       $scope.headerBarView && $scope.headerBarView.align();
       $element.on('$animate:close', function() {
@@ -149,7 +147,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
  * Fixes flickering in iOS7 and old android.
  * Used in title and back button
  */
-.directive('asyncVisible', function() {
+.directive('ionAsyncVisible', function() {
   return function($scope, $element) {
     ionic.requestAnimationFrame(function() {
       $element[0].classList.remove('invisible');
@@ -157,7 +155,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
   };
 })
 
-.directive('view', ['$ionicViewService', '$rootScope', '$animate',
+.directive('ionView', ['$ionicViewService', '$rootScope', '$animate',
            function( $ionicViewService,   $rootScope,   $animate) {
   return {
     restrict: 'EA',
@@ -215,7 +213,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
 }])
 
 
-.directive('navBackButton', ['$ionicViewService', '$rootScope',
+.directive('ionNavBackButton', ['$ionicViewService', '$rootScope',
                      function($ionicViewService,   $rootScope) {
 
   function goBack(e) {
@@ -246,7 +244,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
 }])
 
 
-.directive('navView', ['$ionicViewService', '$state', '$compile', '$controller', '$animate',
+.directive('ionNavView', ['$ionicViewService', '$state', '$compile', '$controller', '$animate',
               function( $ionicViewService,   $state,   $compile,   $controller,   $animate) {
   // IONIC's fork of Angular UI Router, v0.2.7
   // the navView handles registering views in the history, which animation to use, and which
diff --git a/js/ext/angular/src/directive/ionicVirtRepeat.js b/js/ext/angular/src/directive/ionicVirtRepeat.js
index e98fd76891..aa9da32bcb 100644
--- a/js/ext/angular/src/directive/ionicVirtRepeat.js
+++ b/js/ext/angular/src/directive/ionicVirtRepeat.js
@@ -3,7 +3,7 @@
 
 angular.module('ionic.ui.virtRepeat', [])
 
-.directive('virtRepeat', function() {
+.directive('ionVirtRepeat', function() {
   return {
     require: ['?ngModel', '^virtualList'],
     transclude: 'element',
diff --git a/js/ext/angular/src/directive/ionicVirtualRepeat.js b/js/ext/angular/src/directive/ionicVirtualRepeat.js
index 3107a6d8e4..0b0cc116fb 100644
--- a/js/ext/angular/src/directive/ionicVirtualRepeat.js
+++ b/js/ext/angular/src/directive/ionicVirtualRepeat.js
@@ -130,7 +130,7 @@ angular.module('ionic.ui.virtualRepeat', [])
  * scrolling to only render items that are showing or will be showing
  * if a scroll is made.
  */
-.directive('virtualRepeat', ['$log', function($log) {
+.directive('ionVirtualRepeat', ['$log', function($log) {
     return {
       require: ['?ngModel, ^virtualList'],
       transclude: 'element',
diff --git a/js/ext/angular/src/service/ionicActionSheet.js b/js/ext/angular/src/service/ionicActionSheet.js
index f24f947e77..1989543e03 100644
--- a/js/ext/angular/src/service/ionicActionSheet.js
+++ b/js/ext/angular/src/service/ionicActionSheet.js
@@ -20,7 +20,7 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
 
 
       // Compile the template
-      var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
+      var element = $compile('<ion-action-sheet buttons="buttons"></ion-action-sheet>')(scope);
 
       // Grab the sheet element for animation
       var sheetEl = angular.element(element[0].querySelector('.action-sheet-wrapper'));
diff --git a/js/ext/angular/src/service/ionicLoading.js b/js/ext/angular/src/service/ionicLoading.js
index 0ff52c5cf3..f96523ea5d 100644
--- a/js/ext/angular/src/service/ionicLoading.js
+++ b/js/ext/angular/src/service/ionicLoading.js
@@ -31,7 +31,7 @@ angular.module('ionic.service.loading', ['ionic.ui.loading'])
       }
 
       // Compile the template
-      var element = $compile('<loading>' + opts.content + '</loading>')(scope);
+      var element = $compile('<ion-loading>' + opts.content + '</ion-loading>')(scope);
 
       $document[0].body.appendChild(element[0]);
 
diff --git a/js/ext/angular/src/service/ionicView.js b/js/ext/angular/src/service/ionicView.js
index fd219fb11b..7e7f58f0bb 100644
--- a/js/ext/angular/src/service/ionicView.js
+++ b/js/ext/angular/src/service/ionicView.js
@@ -129,8 +129,8 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
       if(element && !this.isTagNameRegistrable(element)) {
         // first check to see if this element can even be registered as a view.
         // Certain tags are only containers for views, but are not views themselves.
-        // For example, the <tabs> directive contains a <tab> and the <tab> is the
-        // view, but the <tabs> directive itself should not be registered as a view.
+        // For example, the <ion-tabs> directive contains a <ion-tab> and the <ion-tab> is the
+        // view, but the <ion-tabs> directive itself should not be registered as a view.
         rsp.navAction = 'disabledByTagName';
         return rsp;
       }
@@ -456,15 +456,15 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
 
     disableRegisterByTagName: function(tagName) {
       // not every element should animate betwee transitions
-      // For example, the <tabs> directive should not animate when it enters,
-      // but instead the <tabs> directve would just show, and its children
-      // <tab> directives would do the animating, but <tabs> itself is not a view
+      // For example, the <ion-tabs> directive should not animate when it enters,
+      // but instead the <ion-tabs> directve would just show, and its children
+      // <ion-tab> directives would do the animating, but <ion-tabs> itself is not a view
       $rootScope.$viewHistory.disabledRegistrableTagNames.push(tagName.toUpperCase());
     },
 
     isTagNameRegistrable: function(element) {
       // check if this element has a tagName (at its root, not recursively)
-      // that shouldn't be animated, like <tabs> or <side-menu>
+      // that shouldn't be animated, like <ion-tabs> or <ion-side-menu>
       var x, y, disabledTags = $rootScope.$viewHistory.disabledRegistrableTagNames;
       for(x=0; x<element.length; x++) {
         if(element[x].nodeType !== 1) continue;
diff --git a/js/ext/angular/test/actionSheet.html b/js/ext/angular/test/actionSheet.html
index 8e5e417d83..2ff5d42bf0 100644
--- a/js/ext/angular/test/actionSheet.html
+++ b/js/ext/angular/test/actionSheet.html
@@ -16,7 +16,7 @@
     <script src="../../../../dist/js/ionic.bundle.js"></script>
   </head>
   <body ng-controller="ActionCtrl">
-    <content>
+    <ion-content>
       <div class="row">
         <div class="col">
           <div style="background-color: #eee" ng-click="show()">
@@ -128,7 +128,7 @@
 
       <button ng-click="show()" class="button">Show</button>
 
-    </content>
+    </ion-content>
     <script>
       angular.module('actionTest', ['ionic', 'ngAnimate'])
 
diff --git a/js/ext/angular/test/anchorScroll.html b/js/ext/angular/test/anchorScroll.html
index 8448a71dbb..eb1cd83442 100644
--- a/js/ext/angular/test/anchorScroll.html
+++ b/js/ext/angular/test/anchorScroll.html
@@ -20,18 +20,18 @@
         <h1 class="title">Click the Clock to Get Stuck</h1>
       </header>
 
-      <content class="has-header">
+      <ion-content class="has-header">
 
-      <list>
-        <item ng-repeat="item in items" 
+      <ion-list>
+        <ion-item ng-repeat="item in items" 
               item="item"
               id="foo-{{item.id}}"
               href="#/item/{{item.id}}">
           Item {{ item.id }}
-        </item>
-      </list>
+        </ion-item>
+      </ion-list>
 
-      </content>
+      </ion-content>
     </div>
 
     <script>
diff --git a/js/ext/angular/test/carousel.html b/js/ext/angular/test/carousel.html
index 5567d8ab05..844e5449f2 100644
--- a/js/ext/angular/test/carousel.html
+++ b/js/ext/angular/test/carousel.html
@@ -43,8 +43,8 @@
   <body>
 
     <div ng-controller="SlideCtrl">
-      <slide-box on-slide-changed="slideChanged(index)" does-continue="true">
-        <slide>
+      <ion-slide-box on-slide-changed="slideChanged(index)" does-continue="true">
+        <ion-slide>
           <h3>Thank you for choosing the Awesome App!</h3>
           <div id="logo">
             <img src="app_icon.png">
@@ -55,8 +55,8 @@
           <p>
             But if you are angry, too bad.
           </p>
-        </slide>
-        <slide>
+        </ion-slide>
+        <ion-slide>
           <h3>Using Awesome</h3>
 
           <div id="list">
@@ -67,14 +67,14 @@
               <li>There is no step 3</li>
             </ol>
           </div>
-        </slide>
-        <slide>
+        </ion-slide>
+        <ion-slide>
           <h3>Any questions?</h3>
           <p>
             Too bad!
           </p>
-        </slide>
-      </slide-box>
+        </ion-slide>
+      </ion-slide-box>
     </div>
     <script>
       angular.module('slideBoxTest', ['ionic'])
diff --git a/js/ext/angular/test/clickTests.html b/js/ext/angular/test/clickTests.html
index 932bf533e1..c77d29e9e2 100644
--- a/js/ext/angular/test/clickTests.html
+++ b/js/ext/angular/test/clickTests.html
@@ -48,21 +48,21 @@
 
     <div class="list">
 
-      <item ng-repeat="item in menuItems" item="item" ng-click="item.actionItem()">ng-click="item.actionItem()"</item>
+      <ion-item ng-repeat="item in menuItems" ion-item="item" ng-click="item.actionItem()">ng-click="item.actionItem()"</ion-item>
 
-      <checkbox>checkbox with no ng-click</checkbox>
+      <ion-checkbox>checkbox with no ng-click</ion-checkbox>
 
-      <toggle ng-click="{{ stringClick }}">Toggle with ng-click="{{ stringClick }]"</toggle>
+      <ion-toggle ng-click="{{ stringClick }}">Toggle with ng-click="{{ stringClick }]"</ion-toggle>
 
-      <radio ng-change="radioChange()"
+      <ion-radio ng-change="radioChange()"
              ng-click="radioClick(radioModel.data)"
              ng-model="radioModel.data"
-             ng-value="'Radio A'">Radio A</radio>
+             ng-value="'Radio A'">Radio A</ion-radio>
 
-      <radio ng-change="radioChange()"
+      <ion-radio ng-change="radioChange()"
              ng-click="radioClick(radioModel.data)"
              ng-model="radioModel.data"
-             ng-value="'Radio B'">Radio B</radio>
+             ng-value="'Radio B'">Radio B</ion-radio>
 
     </div>
 
diff --git a/js/ext/angular/test/content.html b/js/ext/angular/test/content.html
index 0039c96ff1..ec028ba482 100644
--- a/js/ext/angular/test/content.html
+++ b/js/ext/angular/test/content.html
@@ -54,10 +54,10 @@
 
   </head>
   <body ng-controller="ThisCtrl">
-    <pane>
-      <header-bar id="header" title="'Title'" type="bar-primary" hides-header></header-bar>
+    <ion-pane>
+      <ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar>
 
-      <content id="container"
+      <ion-content id="container"
         start-y="55"
         on-scroll="onScroll(event, scrollTop, scrollLeft)"
         on-scroll-complete="onScrollComplete(scrollTop, scrollLeft)"
@@ -67,7 +67,7 @@
         has-tabs="true"
         has-header="true"
         >
-        <refresher></refresher>
+        <ion-refresher></ion-refresher>
         <div id="search-box" class="bar bar-header item-input-inset">
           <label class="item-input-wrapper">
             <i class="icon ion-ios7-search placeholder-icon"></i>
@@ -83,7 +83,7 @@
           <li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
         </ul>
         <input type="text" placeholder="INPUT TEXT">
-      </content>
+      </ion-content>
       <nav id="tab-bar" class="tabs tabs-icon-top">
         <a class="tab-item" href="#">
           <i class="icon ion-game-controller-a"></i>
@@ -107,7 +107,7 @@
         </a>
       </nav>
 
-    </pane>
+    </ion-pane>
 
     <script>
       angular.module('navTest', ['ionic'])
diff --git a/js/ext/angular/test/contentClick.html b/js/ext/angular/test/contentClick.html
index 5d54e533fa..44966cf353 100644
--- a/js/ext/angular/test/contentClick.html
+++ b/js/ext/angular/test/contentClick.html
@@ -49,14 +49,14 @@
 
   </head>
   <body>
-    <tabs>
-      <tab ng-controller="MyCtrl">
-        <content>
+    <ion-tabs>
+      <ion-tab ng-controller="MyCtrl">
+        <ion-content>
           <button ng-click="add()">add</button>
           {{count}}
-        </content>
-      </tab>
-    </tabs>
+        </ion-content>
+      </ion-tab>
+    </ion-tabs>
 
     <script>
       angular.module('navTest', ['ionic'])
diff --git a/js/ext/angular/test/content_defer.html b/js/ext/angular/test/content_defer.html
index 2d038a09f2..76fe75805b 100644
--- a/js/ext/angular/test/content_defer.html
+++ b/js/ext/angular/test/content_defer.html
@@ -10,10 +10,10 @@
     <script src="../../../../dist/js/ionic.bundle.js"></script>
   </head>
   <body ng-controller="ThisCtrl">
-    <pane>
-      <header-bar id="header" title="'Title'" type="bar-primary" hides-header></header-bar>
+    <ion-pane>
+      <ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar>
 
-      <content id="container"
+      <ion-content id="container"
         on-scroll="onScroll(event, scrollTop, scrollLeft)"
         on-scroll-complete="onScrollComplete(scrollTop, scrollLeft)"
         on-refresh="onRefresh()"
@@ -23,7 +23,7 @@
         has-header="true"
         >
         <div ng-repeat="items in items">{{$index}}</div>
-      </content>
+      </ion-content>
       <nav id="tab-bar" class="tabs tabs-icon-top">
         <a class="tab-item" href="#">
           <i class="icon ion-game-controller-a"></i>
@@ -47,7 +47,7 @@
         </a>
       </nav>
 
-    </pane>
+    </ion-pane>
 
     <script>
       angular.module('navTest', ['ionic'])
diff --git a/js/ext/angular/test/content_h.html b/js/ext/angular/test/content_h.html
index 004d9a0f30..e5c1f67013 100644
--- a/js/ext/angular/test/content_h.html
+++ b/js/ext/angular/test/content_h.html
@@ -49,16 +49,16 @@
 
   </head>
   <body ng-controller="ThisCtrl">
-    <pane>
-      <header-bar id="header" title="'Title'" type="bar-primary" hides-header></header-bar>
+    <ion-pane>
+      <ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar>
 
-      <content id="container"
+      <ion-content id="container"
         has-scroll-x="true"
         has-tabs="true"
         has-header="true"
         >
         <div style="height: 4000px; width: 4000px; background: url('tree_bark.png') repeat"></div>
-      </content>
+      </ion-content>
       <nav id="tab-bar" class="tabs tabs-icon-top">
         <a class="tab-item" href="#">
           <i class="icon ion-game-controller-a"></i>
@@ -82,7 +82,7 @@
         </a>
       </nav>
 
-    </pane>
+    </ion-pane>
 
     <script>
       angular.module('navTest', ['ionic'])
diff --git a/js/ext/angular/test/directive/ionicCheckbox.unit.js b/js/ext/angular/test/directive/ionicCheckbox.unit.js
index 03a434b38f..b40b7395a7 100644
--- a/js/ext/angular/test/directive/ionicCheckbox.unit.js
+++ b/js/ext/angular/test/directive/ionicCheckbox.unit.js
@@ -9,13 +9,13 @@ describe('Ionic Checkbox', function() {
   }));
 
   it('should set the checkbox name', function() {
-    el = compile('<checkbox name="myname"></checkbox>')(scope);
+    el = compile('<ion-checkbox name="myname"></ion-checkbox>')(scope);
     var input = el.find('input');
     expect(input.attr('name')).toEqual('myname');
   });
 
   it('should setup checkbox markup', function() {
-    el = compile('<checkbox>INNER TEXT</checkbox>')(scope);
+    el = compile('<ion-checkbox>INNER TEXT</ion-checkbox>')(scope);
     expect(el.hasClass('item')).toEqual(true);
     expect(el.hasClass('item-checkbox')).toEqual(true);
     var label = el.find('label');
diff --git a/js/ext/angular/test/directive/ionicContent.unit.js b/js/ext/angular/test/directive/ionicContent.unit.js
index a569679740..27e7cc5788 100644
--- a/js/ext/angular/test/directive/ionicContent.unit.js
+++ b/js/ext/angular/test/directive/ionicContent.unit.js
@@ -12,22 +12,22 @@ describe('Ionic Content directive', function() {
   }));
 
   it('Has $ionicScroll controller', function() {
-    element = compile('<content></content>')(scope);
+    element = compile('<ion-content></ion-content>')(scope);
     expect(element.controller('$ionicScroll').element).toBe(element[0]);
   });
 
   it('Has content class', function() {
-    element = compile('<content></content>')(scope);
+    element = compile('<ion-content></ion-content>')(scope);
     expect(element.hasClass('scroll-content')).toBe(true);
   });
 
   it('Has header', function() {
-    element = compile('<content has-header="true"></content>')(scope);
+    element = compile('<ion-content has-header="true"></ion-content>')(scope);
     expect(element.hasClass('has-header')).toEqual(true);
   });
 
   it('should add padding classname', function() {
-    element = compile('<content padding="true"></content>')(scope);
+    element = compile('<ion-content padding="true"></ion-content>')(scope);
     expect(element.hasClass('scroll-content')).toEqual(true);
     expect(element.hasClass('padding')).toEqual(false);
     var scrollElement = element.find('.scroll');
@@ -36,7 +36,7 @@ describe('Ionic Content directive', function() {
 
   it('Enables bouncing by default', function() {
     ionic.Platform.setPlatform('iPhone');
-    element = compile('<content has-header="true"></content>')(scope);
+    element = compile('<ion-content has-header="true"></ion-content>')(scope);
     scope.$apply();
     var newScope = element.isolateScope();
     var scrollView = scope.scrollView;
@@ -45,7 +45,7 @@ describe('Ionic Content directive', function() {
 
   it('Disables bouncing when has-bouncing = false', function() {
     ionic.Platform.setPlatform('iPhone');
-    element = compile('<content has-header="true" has-bouncing="false"></content>')(scope);
+    element = compile('<ion-content has-header="true" has-bouncing="false"></ion-content>')(scope);
     scope.$apply();
     var newScope = element.isolateScope();
     var scrollView = scope.scrollView;
@@ -54,7 +54,7 @@ describe('Ionic Content directive', function() {
 
   it('Disables bouncing by default on Android', function() {
     ionic.Platform.setPlatform('Android');
-    element = compile('<content has-header="true"></content>')(scope);
+    element = compile('<ion-content has-header="true"></ion-content>')(scope);
     scope.$apply();
     var newScope = element.isolateScope();
     var scrollView = scope.scrollView;
@@ -63,7 +63,7 @@ describe('Ionic Content directive', function() {
 
   it('Disables bouncing by default on Android unless has-bouncing = true', function() {
     ionic.Platform.setPlatform('Android');
-    element = compile('<content has-header="true" has-bouncing="true"></content>')(scope);
+    element = compile('<ion-content has-header="true" has-bouncing="true"></ion-content>')(scope);
     scope.$apply();
     var newScope = element.isolateScope();
     var scrollView = scope.scrollView;
@@ -72,7 +72,7 @@ describe('Ionic Content directive', function() {
 
 
   it('Should set start x and y', function() {
-    element = compile('<content start-x="100" start-y="300" has-header="true"></content>')(scope);
+    element = compile('<ion-content start-x="100" start-y="300" has-header="true"></ion-content>')(scope);
     scope.$apply();
     var newScope = element.isolateScope();
     var scrollView = scope.scrollView;
@@ -87,7 +87,7 @@ describe('Ionic Content directive', function() {
       var parent = angular.element('<div>');
       //Make a phony element that tells the world it's a navView when in reality it's just a div
       parent.data('$navViewController', true);
-      parent.append('<content><br/><div>hello</div><br/></content>');
+      parent.append('<ion-content><br/><div>hello</div><br/></ion-content>');
       compile(parent)(scope);
       scope.$apply();
 
diff --git a/js/ext/angular/test/directive/ionicList.unit.js b/js/ext/angular/test/directive/ionicList.unit.js
index 716616a4bc..d7ea5e95c6 100644
--- a/js/ext/angular/test/directive/ionicList.unit.js
+++ b/js/ext/angular/test/directive/ionicList.unit.js
@@ -15,7 +15,7 @@ describe('Ionic List', function() {
     scope.showDelete = false;
     scope.showReorder = false;
 
-    listElement = angular.element('<list show-delete="showDelete" show-reorder="showReorder">');
+    listElement = angular.element('<ion-list show-delete="showDelete" show-reorder="showReorder">');
     listElement = _$compile_(listElement)(scope);
 
     listCtrl = listElement.controller('list');
@@ -24,16 +24,16 @@ describe('Ionic List', function() {
   }));
 
   it('Should init', function() {
-    var element = compile('<list>' +
-      '<item></item>' + 
-      '<item></item>' + 
-      '</list>')(scope);
+    var element = compile('<ion-list>' +
+      '<ion-item></ion-item>' + 
+      '<ion-item></ion-item>' + 
+      '</ion-list>')(scope);
 
     expect(element.children().length).toBe(2);
   });
 
   it('Should add animation class', function() {
-    var element = compile('<list animation="my-animation">')(scope);
+    var element = compile('<ion-list animation="my-animation">')(scope);
     expect(element.hasClass('my-animation')).toBe(true);
   });
 
@@ -62,7 +62,7 @@ describe('Ionic List', function() {
     scope.onReorder = function(el, start, end) {
     };
 
-    listElement = angular.element('<list on-reorder="onReorder(el, start, end)"></list>');
+    listElement = angular.element('<ion-list on-reorder="onReorder(el, start, end)"></ion-list>');
     listElement = compile(listElement)(scope);
 
     var lv = listElement.isolateScope().listView;
@@ -85,13 +85,13 @@ describe('Ionic Item Directive', function () {
     $compile = _$compile_;
     $rootScope.showDelete = false;
 
-    listElement = angular.element('<list show-delete="showDelete">');
+    listElement = angular.element('<ion-list show-delete="showDelete">');
     listElement = _$compile_(listElement)($rootScope);
     listScope = listElement.isolateScope();
 
     listCtrl = listElement.controller('list');
 
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = _$compile_(itemElement)($rootScope);
 
     $rootScope.$digest();
@@ -99,13 +99,13 @@ describe('Ionic Item Directive', function () {
   }));
 
   it('Should set item type from item attribute', inject(function ($timeout) {
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
     expect(itemScope.itemClass).toBe(undefined);
 
-    itemElement = angular.element('<item item-type="item-type-test">').appendTo(listElement);
+    itemElement = angular.element('<ion-item item-type="item-type-test">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -114,9 +114,9 @@ describe('Ionic Item Directive', function () {
   }));
 
   it('Should set item type from list attribute', inject(function ($timeout) {
-    listElement = angular.element('<list item-type="list-item-type-test">');
+    listElement = angular.element('<ion-list item-type="list-item-type-test">');
     listElement = $compile(listElement)($rootScope);
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -124,7 +124,7 @@ describe('Ionic Item Directive', function () {
   }));
 
   it('Should item option buttons from item attribute', inject(function ($timeout) {
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -135,7 +135,7 @@ describe('Ionic Item Directive', function () {
     $rootScope.buttons = [
       { text: 'Edit' }, { text: 'Cancel' }
     ];
-    itemElement = angular.element('<item option-buttons="buttons">').appendTo(listElement);
+    itemElement = angular.element('<ion-item option-buttons="buttons">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -149,12 +149,12 @@ describe('Ionic Item Directive', function () {
       { text: 'Edit' }, { text: 'Cancel' }
     ];
 
-    listElement = angular.element('<list option-buttons="buttons">');
+    listElement = angular.element('<ion-list option-buttons="buttons">');
     listElement = $compile(listElement)($rootScope);
     listScope = listElement.isolateScope();
     expect(listScope.optionButtons().length ).toBe(2);
 
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -169,7 +169,7 @@ describe('Ionic Item Directive', function () {
       { text: 'Edit' }, { text: 'Cancel' }
     ];
 
-    itemElement = angular.element('<item can-swipe="false" option-buttons="buttons">').appendTo(listElement);
+    itemElement = angular.element('<ion-item can-swipe="false" option-buttons="buttons">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -182,12 +182,12 @@ describe('Ionic Item Directive', function () {
       { text: 'Edit' }, { text: 'Cancel' }
     ];
 
-    listElement = angular.element('<list can-swipe="false" option-buttons="buttons">');
+    listElement = angular.element('<ion-list can-swipe="false" option-buttons="buttons">');
     listElement = $compile(listElement)($rootScope);
     listScope = listElement.isolateScope();
     expect(listScope.optionButtons().length ).toBe(2);
 
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -196,7 +196,7 @@ describe('Ionic Item Directive', function () {
   }));
 
   it('Should hide delete w/ item can-delete attribute true but no list or item onDelete', inject(function ($timeout) {
-    itemElement = angular.element('<item can-delete="true">').appendTo(listElement);
+    itemElement = angular.element('<ion-item can-delete="true">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -206,7 +206,7 @@ describe('Ionic Item Directive', function () {
 
   it('Should hide delete w/ item can-delete attribute false but with item onDelete', inject(function ($timeout) {
     $rootScope.onDelete = function() {};
-    itemElement = angular.element('<item can-delete="false" on-delete="onDelete">').appendTo(listElement);
+    itemElement = angular.element('<ion-item can-delete="false" on-delete="onDelete">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -216,7 +216,7 @@ describe('Ionic Item Directive', function () {
 
   it('Should show delete w/ no item can-delete attribute but with item onDelete', inject(function ($timeout) {
     $rootScope.onDelete = function() {};
-    itemElement = angular.element('<item on-delete="onDelete" delete-icon="test-icon">').appendTo(listElement);
+    itemElement = angular.element('<ion-item on-delete="onDelete" delete-icon="test-icon">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -227,11 +227,11 @@ describe('Ionic Item Directive', function () {
 
   it('Should hide delete w/ list can-delete attribute true but no list or item onDelete', inject(function ($timeout) {
     $rootScope.onDelete = function() {};
-    listElement = angular.element('<list can-delete="true">');
+    listElement = angular.element('<ion-list can-delete="true">');
     listElement = $compile(listElement)($rootScope);
     listScope = listElement.isolateScope();
 
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -241,11 +241,11 @@ describe('Ionic Item Directive', function () {
 
   it('Should hide delete w/ list can-delete attribute false but with list onDelete', inject(function ($timeout) {
     $rootScope.onDelete = function() {};
-    listElement = angular.element('<list can-delete="false" on-delete="onDelete">');
+    listElement = angular.element('<ion-list can-delete="false" on-delete="onDelete">');
     listElement = $compile(listElement)($rootScope);
     listScope = listElement.isolateScope();
 
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -255,11 +255,11 @@ describe('Ionic Item Directive', function () {
 
   it('Should hide delete w/ list can-delete attribute false but with item onDelete', inject(function ($timeout) {
     $rootScope.onDelete = function() {};
-    listElement = angular.element('<list can-delete="false">');
+    listElement = angular.element('<ion-list can-delete="false">');
     listElement = $compile(listElement)($rootScope);
     listScope = listElement.isolateScope();
 
-    itemElement = angular.element('<item on-delete="onDelete">').appendTo(listElement);
+    itemElement = angular.element('<ion-item on-delete="onDelete">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -269,10 +269,10 @@ describe('Ionic Item Directive', function () {
 
   it('Should show delete w/ no can-delete attribute but with list onDelete', inject(function ($timeout) {
     $rootScope.onDelete = function() {};
-    listElement = angular.element('<list on-delete="onDelete" delete-icon="test-icon">');
+    listElement = angular.element('<ion-list on-delete="onDelete" delete-icon="test-icon">');
     listElement = $compile(listElement)($rootScope);
     listScope = listElement.isolateScope();
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -283,7 +283,7 @@ describe('Ionic Item Directive', function () {
   }));
 
   it('Should not be able to reorder cuz no item or list can-reorder attribute true', inject(function ($timeout) {
-    itemElement = angular.element('<item reorder-icon="test-icon">').appendTo(listElement);
+    itemElement = angular.element('<ion-item reorder-icon="test-icon">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -292,7 +292,7 @@ describe('Ionic Item Directive', function () {
   }));
 
   it('Should be able to reorder cuz item can-reorder attribute true', inject(function ($timeout) {
-    itemElement = angular.element('<item can-reorder="true" reorder-icon="test-icon">').appendTo(listElement);
+    itemElement = angular.element('<ion-item can-reorder="true" reorder-icon="test-icon">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -301,10 +301,10 @@ describe('Ionic Item Directive', function () {
   }));
 
   it('Should be able to reorder cuz list can-reorder attribute true', inject(function ($timeout) {
-    listElement = angular.element('<list can-reorder="true" reorder-icon="test-icon">');
+    listElement = angular.element('<ion-list can-reorder="true" reorder-icon="test-icon">');
     listElement = $compile(listElement)($rootScope);
     listScope = listElement.isolateScope();
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -313,7 +313,7 @@ describe('Ionic Item Directive', function () {
   }));
 
   it('Should not have options cuz no optionButtons', inject(function ($timeout) {
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -322,10 +322,10 @@ describe('Ionic Item Directive', function () {
   }));
 
   it('Should be able to reorder cuz list can-reorder attribute false and item can-reorder true', inject(function ($timeout) {
-    listElement = angular.element('<list can-reorder="false">');
+    listElement = angular.element('<ion-list can-reorder="false">');
     listElement = $compile(listElement)($rootScope);
     listScope = listElement.isolateScope();
-    itemElement = angular.element('<item can-reorder="true">').appendTo(listElement);
+    itemElement = angular.element('<ion-item can-reorder="true">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -335,7 +335,7 @@ describe('Ionic Item Directive', function () {
 
   it('Should not have options cuz item can-swipe false', inject(function ($timeout) {
     $rootScope.optionButtons = [{text:'BUTTON'}];
-    itemElement = angular.element('<item option-buttons="optionButtons" can-swipe="false">').appendTo(listElement);
+    itemElement = angular.element('<ion-item option-buttons="optionButtons" can-swipe="false">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -345,10 +345,10 @@ describe('Ionic Item Directive', function () {
 
   it('Should not have options cuz list can-swipe false', inject(function ($timeout) {
     $rootScope.optionButtons = [{text:'BUTTON'}];
-    listElement = angular.element('<list option-buttons="optionButtons" can-swipe="false">');
+    listElement = angular.element('<ion-list option-buttons="optionButtons" can-swipe="false">');
     listElement = $compile(listElement)($rootScope);
     listScope = listElement.isolateScope();
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -358,7 +358,7 @@ describe('Ionic Item Directive', function () {
 
   it('Should have options cuz item option-buttons and no can-swipe false', inject(function ($timeout) {
     $rootScope.optionButtons = [{text:'BUTTON'}];
-    itemElement = angular.element('<item option-buttons="optionButtons">').appendTo(listElement);
+    itemElement = angular.element('<ion-item option-buttons="optionButtons">').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
@@ -368,10 +368,10 @@ describe('Ionic Item Directive', function () {
 
   it('Should have options cuz list option-buttons and no can-swipe false', inject(function ($timeout) {
     $rootScope.optionButtons = [{text:'BUTTON'}];
-    listElement = angular.element('<list option-buttons="optionButtons">');
+    listElement = angular.element('<ion-list option-buttons="optionButtons">');
     listElement = $compile(listElement)($rootScope);
     listScope = listElement.isolateScope();
-    itemElement = angular.element('<item>').appendTo(listElement);
+    itemElement = angular.element('<ion-item>').appendTo(listElement);
     itemElement = $compile(itemElement)($rootScope);
     $rootScope.$digest();
     itemScope = itemElement.isolateScope();
diff --git a/js/ext/angular/test/directive/ionicNavView.unit.js b/js/ext/angular/test/directive/ionicNavView.unit.js
index a2dc190691..e09162cff8 100644
--- a/js/ext/angular/test/directive/ionicNavView.unit.js
+++ b/js/ext/angular/test/directive/ionicNavView.unit.js
@@ -6,13 +6,13 @@ describe('Ionic nav-view', function() {
     compile = $compile;
     scope = $rootScope.$new();
   }));
-  
+
   it('should publish a controller', function() {
-    var view = angular.element('<nav-view></nav-view>');
+    var view = angular.element('<ion-nav-view></ion-nav-view>');
     compile(view)(scope);
     scope.$apply();
 
-    expect(view.controller('navView')).toBeTruthy();
+    expect(view.controller('ionNavView')).toBeTruthy();
   });
 
   /*
diff --git a/js/ext/angular/test/directive/ionicScroll.unit.js b/js/ext/angular/test/directive/ionicScroll.unit.js
index 49449e245b..fe5b184017 100644
--- a/js/ext/angular/test/directive/ionicScroll.unit.js
+++ b/js/ext/angular/test/directive/ionicScroll.unit.js
@@ -15,17 +15,17 @@ describe('Ionic Scroll Directive', function() {
   }));
 
   it('Has $ionicScroll controller', function() {
-    element = compile('<scroll></scroll>')(scope);
+    element = compile('<ion-scroll></ion-scroll>')(scope);
     expect(element.controller('$ionicScroll').element).toBe(element[0]);
   });
 
   it('Has scroll-view class', function() {
-    element = compile('<scroll></scroll>')(scope);
+    element = compile('<ion-scroll></ion-scroll>')(scope);
     expect(element.hasClass('scroll-view')).toBe(true);
   });
 
   it('should add padding classname', function() {
-    element = compile('<scroll padding="true"></scroll>')(scope);
+    element = compile('<ion-scroll padding="true"></ion-scroll>')(scope);
     expect(element.children().eq(0).hasClass('padding')).toEqual(true);
     var scrollElement = element.find('.scroll');
     expect(scrollElement.hasClass('padding')).toEqual(true);
@@ -33,7 +33,7 @@ describe('Ionic Scroll Directive', function() {
 
   it('Enables bouncing by default', function() {
     ionic.Platform.setPlatform('iPhone');
-    element = compile('<content has-header="true"></scroll>')(scope);
+    element = compile('<ion-content has-header="true"></ion-scroll>')(scope);
     scope.$apply();
     var newScope = element.isolateScope();
     var scrollView = scope.scrollView;
@@ -42,7 +42,7 @@ describe('Ionic Scroll Directive', function() {
 
   it('Disables bouncing when has-bouncing = false', function() {
     ionic.Platform.setPlatform('iPhone');
-    element = compile('<content has-header="true" has-bouncing="false"></scroll>')(scope);
+    element = compile('<ion-content has-header="true" has-bouncing="false"></ion-scroll>')(scope);
     scope.$apply();
     var newScope = element.isolateScope();
     var scrollView = scope.scrollView;
@@ -51,7 +51,7 @@ describe('Ionic Scroll Directive', function() {
 
   it('Disables bouncing by default on Android', function() {
     ionic.Platform.setPlatform('Android');
-    element = compile('<content has-header="true"></scroll>')(scope);
+    element = compile('<ion-content has-header="true"></ion-scroll>')(scope);
     scope.$apply();
     var newScope = element.isolateScope();
     var scrollView = scope.scrollView;
@@ -59,7 +59,7 @@ describe('Ionic Scroll Directive', function() {
   });
 
   it('Should set start x and y', function() {
-    element = compile('<content start-x="100" start-y="300" has-header="true"></scroll>')(scope);
+    element = compile('<ion-content start-x="100" start-y="300" has-header="true"></ion-scroll>')(scope);
     scope.$apply();
     var newScope = element.isolateScope();
     var scrollView = scope.scrollView;
diff --git a/js/ext/angular/test/directive/ionicSideMenu.unit.js b/js/ext/angular/test/directive/ionicSideMenu.unit.js
index c7a8890dea..43ab278d96 100644
--- a/js/ext/angular/test/directive/ionicSideMenu.unit.js
+++ b/js/ext/angular/test/directive/ionicSideMenu.unit.js
@@ -8,7 +8,7 @@ describe('Ionic Angular Side Menu', function() {
   beforeEach(module('ionic.ui.sideMenu'));
 
   beforeEach(inject(function($compile, $rootScope) {
-    el = $compile('<side-menus></side-menus>')($rootScope);
+    el = $compile('<ion-side-menus></ion-side-menus>')($rootScope);
   }));
 
   it('Should init', function() {
@@ -26,12 +26,12 @@ describe('Ionic Side Menu Content Directive', function () {
     $compile = _$compile_;
     scope = _$rootScope_;
 
-    var sideMenus = $compile('<side-menus>')(scope).appendTo('body');
+    var sideMenus = $compile('<ion-side-menus>')(scope).appendTo('body');
 
     sideMenuCtrl = sideMenus.controller('sideMenus');
     spyOn(sideMenuCtrl, '_handleDrag');
 
-    element = angular.element('<div side-menu-content>').appendTo(sideMenus);
+    element = angular.element('<div ion-side-menu-content>').appendTo(sideMenus);
 
     $compile(element)(scope);
     scope.$digest();
@@ -50,11 +50,11 @@ describe('Ionic Side Menu Directive', function () {
     $rootScope.widthVal = 250;
     $rootScope.enabledVal = true;
 
-    var sideMenus = $compile('<side-menus>')($rootScope);
+    var sideMenus = $compile('<ion-side-menus>')($rootScope);
 
-    sideMenuCtrl = sideMenus.controller('sideMenus');
+    sideMenuCtrl = sideMenus.controller('ionSideMenus');
 
-    element = angular.element('<side-menu side="left" is-enabled="enabledVal" width="widthVal">').appendTo(sideMenus);
+    element = angular.element('<ion-side-menu side="left" is-enabled="enabledVal" width="widthVal">').appendTo(sideMenus);
     $compile(element)($rootScope);
 
     scope = element.scope();
diff --git a/js/ext/angular/test/directive/ionicSlideBox.unit.js b/js/ext/angular/test/directive/ionicSlideBox.unit.js
index 28a0583339..c4199417e0 100644
--- a/js/ext/angular/test/directive/ionicSlideBox.unit.js
+++ b/js/ext/angular/test/directive/ionicSlideBox.unit.js
@@ -13,21 +13,21 @@ describe('Ionic Angular Slide Box', function() {
     rootScope = $rootScope;
     compile = $compile;
 
-    el = $compile('<slide-box>\
-      <slide>\
+    el = $compile('<ion-slide-box>\
+      <ion-slide>\
         <div class="box blue">\
           <h1>BLUE {{slideBox.slideIndex}}</h1>\
         </div>\
-      </slide>\
-      <slide>\
+      </ion-slide>\
+      <ion-slide>\
         <div class="box yellow">\
           <h1>YELLOW {{slideBox.slideIndex}}</h1>\
         </div>\
-      </slide>\
-      <slide>\
+      </ion-slide>\
+      <ion-slide>\
       <div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>\
-      </slide>\
-    </slide-box>')($rootScope);
+      </ion-slide>\
+    </ion-slide-box>')($rootScope);
   }));
 
   it('Should init', function() {
@@ -45,21 +45,21 @@ describe('Ionic Angular Slide Box', function() {
   });
 
   it('Should set initial active slide', function() {
-    el = compile('<slide-box active-slide="2">\
-      <slide>\
+    el = compile('<ion-slide-box active-slide="2">\
+      <ion-slide>\
         <div class="box blue">\
           <h1>BLUE {{slideBox.slideIndex}}</h1>\
         </div>\
-      </slide>\
-      <slide>\
+      </ion-slide>\
+      <ion-slide>\
         <div class="box yellow">\
           <h1>YELLOW {{slideBox.slideIndex}}</h1>\
         </div>\
-      </slide>\
-      <slide>\
+      </ion-slide>\
+      <ion-slide>\
       <div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>\
-      </slide>\
-    </slide-box>')(rootScope);
+      </ion-slide>\
+    </ion-slide-box>')(rootScope);
 
    var scope = el.scope();
    expect(scope.slideBox.getPos()).toBe(2);
diff --git a/js/ext/angular/test/directive/ionicTabBar.unit.js b/js/ext/angular/test/directive/ionicTabBar.unit.js
index 0d4e2b458d..7e22db6416 100644
--- a/js/ext/angular/test/directive/ionicTabBar.unit.js
+++ b/js/ext/angular/test/directive/ionicTabBar.unit.js
@@ -119,13 +119,13 @@ describe('tabs', function() {
     }));
 
     it('Has tab class', function() {
-      var element = compile('<tabs></tabs>')(scope);
+      var element = compile('<ion-tabs></ion-tabs>')(scope);
       scope.$digest();
       expect(element.find('.tabs').hasClass('tabs')).toBe(true);
     });
 
     it('Has tab children', function() {
-      element = compile('<tabs></tabs>')(scope);
+      element = compile('<ion-tabs></ion-tabs>')(scope);
       scope = element.scope();
       scope.controllers = [
         { title: 'Home', icon: 'icon-home' },
@@ -137,19 +137,19 @@ describe('tabs', function() {
     });
 
     it('Has compiled children', function() {
-      element = compile('<tabs>' +
-        '<tab active="true" title="Item" icon="icon-default"></tab>' +
-        '<tab active="true" title="Item" icon="icon-default"></tab>' +
-      '</tabs>')(scope);
+      element = compile('<ion-tabs>' +
+        '<ion-tab active="true" title="Item" icon="icon-default"></ion-tab>' +
+        '<ion-tab active="true" title="Item" icon="icon-default"></ion-tab>' +
+      '</ion-tabs>')(scope);
       scope.$digest();
       expect(element.find('a').length).toBe(2);
     });
 
     it('Sets style on child tabs', function() {
-      element = compile('<tabs tabs-type="tabs-positive" tabs-style="tabs-icon-bottom">' +
-        '<tab active="true" title="Item" icon="icon-default"></tab>' +
-        '<tab active="true" title="Item" icon="icon-default"></tab>' +
-      '</tabs>')(scope);
+      element = compile('<ion-tabs tabs-type="tabs-positive" tabs-style="tabs-icon-bottom">' +
+        '<ion-tab active="true" title="Item" icon="icon-default"></ion-tab>' +
+        '<ion-tab active="true" title="Item" icon="icon-default"></ion-tab>' +
+      '</ion-tabs>')(scope);
       scope.$digest();
       var tabs = element[0].querySelector('.tabs');
       expect(angular.element(tabs).hasClass('tabs-positive')).toEqual(true);
@@ -157,10 +157,10 @@ describe('tabs', function() {
     });
 
     it('Has nav-view', function() {
-      element = compile('<tabs>' +
-        '<tab active="true" title="Item 1" href="#/page1"><nav-view name="name1"></nav-view></tab>' +
-        '<tab active="true" title="Item 2" href="/page2">content2</tab>' +
-      '</tabs>')(scope);
+      element = compile('<ion-tabs>' +
+        '<ion-tab active="true" title="Item 1" href="#/page1"><ion-nav-view name="name1"></ion-nav-view></ion-tab>' +
+        '<ion-tab active="true" title="Item 2" href="/page2">content2</ion-tab>' +
+      '</ion-tabs>')(scope);
       scope = element.scope();
       scope.$digest();
       expect(scope.tabCount).toEqual(2);
@@ -184,9 +184,9 @@ describe('tabs', function() {
 
       scope.badgeValue = 3;
       scope.badgeStyleValue = 'badge-assertive';
-      element = compile('<tabs>' +
-        '<tab title="Item" icon="icon-default" badge="badgeValue" badge-style="{{badgeStyleValue}}"></tab>' +
-        '</tabs>')(scope);
+      element = compile('<ion-tabs>' +
+        '<ion-tab title="Item" icon="icon-default" badge="badgeValue" badge-style="{{badgeStyleValue}}"></ion-tab>' +
+        '</ion-tabs>')(scope);
       scope.$digest();
       $document[0].body.appendChild(element[0]);
     }));
@@ -238,8 +238,8 @@ describe('tabs', function() {
         $scope: tabsScope
       });
 
-      //Create an outer div that has a tabsController on it so tab thinks it's in a <tabs>
-      var element = angular.element('<div><tab><div class="my-content"></div></tab></div>');
+      //Create an outer div that has a tabsController on it so ion-tab thinks it's in a <ion-tabs>
+      var element = angular.element('<div><ion-tab><div class="my-content"></div></ion-tab></div>');
       element.data('$tabsController', ctrl);
       $compile(element)(tabsScope)
       tabsScope.$apply();
@@ -258,9 +258,9 @@ describe('tabs', function() {
 
       scope.badgeValue = 3;
       scope.isActive = false;
-      element = compile('<tabs class="tabs">' +
-        '<tab-controller-item icon-title="Icon <b>title</b>" icon="icon-class" icon-on="icon-on-class" icon-off="icon-off-class" badge="badgeValue" badge-style="badgeStyle" active="isActive" index="0"></tab-controller-item>' +
-      '</tabs>')(scope);
+      element = compile('<ion-tabs class="tabs">' +
+        '<ion-tab-controller-item icon-title="Icon <b>title</b>" icon="icon-class" icon-on="icon-on-class" icon-off="icon-off-class" badge="badgeValue" badge-style="badgeStyle" active="isActive" index="0"></ion-tab-controller-item>' +
+      '</ion-tabs>')(scope);
       scope.$digest();
       $document[0].body.appendChild(element[0]);
     }));
diff --git a/js/ext/angular/test/directive/ionicToggle.unit.js b/js/ext/angular/test/directive/ionicToggle.unit.js
index 53146fe7ba..e36e1e330d 100644
--- a/js/ext/angular/test/directive/ionicToggle.unit.js
+++ b/js/ext/angular/test/directive/ionicToggle.unit.js
@@ -6,7 +6,7 @@ describe('Ionic Toggle', function() {
   beforeEach(inject(function($compile, $rootScope) {
     compile = $compile;
     rootScope = $rootScope;
-    el = $compile('<toggle ng-model="data.name"></toggle>')($rootScope);
+    el = $compile('<ion-toggle ng-model="data.name"></ion-toggle>')($rootScope);
   }));
 
   /*
@@ -29,7 +29,7 @@ describe('Ionic Toggle', function() {
   it('Should disable and enable', function() {
 
     rootScope.data = { isDisabled: false };
-    el = compile('<toggle ng-model="data.name" ng-disabled="data.isDisabled"></toggle>')(rootScope);
+    el = compile('<ion-toggle ng-model="data.name" ng-disabled="data.isDisabled"></ion-toggle>')(rootScope);
     var toggle = el.isolateScope().toggle;
     expect(toggle.val()).toBe(false);
     el.click();
diff --git a/js/ext/angular/test/directive/ionicView.unit.js b/js/ext/angular/test/directive/ionicView.unit.js
index dd8e8cb751..fa56ab2fd8 100644
--- a/js/ext/angular/test/directive/ionicView.unit.js
+++ b/js/ext/angular/test/directive/ionicView.unit.js
@@ -11,42 +11,42 @@ describe('Ionic View', function() {
   }));
 
   it('should init a view', function() {
-    var element = compile('<view>me view</view>')(scope);
+    var element = compile('<ion-view>me view</ion-view>')(scope);
     expect(element.html()).toEqual('me view');
   });
 
   it('should add pane classname and remove title from view', function() {
-    var element = compile('<view title="\'Me Title\'"></view>')(scope);
+    var element = compile('<ion-view title="\'Me Title\'"></ion-view>')(scope);
     expect(element.attr('title')).toBeUndefined();
     expect(element.hasClass('pane')).toEqual(true);
   });
 
   it('should broacast view enter on link', function() {
     spyOn(scope, '$broadcast');
-    var element = compile('<view title="\'Me Title\'"></view>')(scope);
+    var element = compile('<ion-view title="\'Me Title\'"></ion-view>')(scope);
     expect(scope.$broadcast).toHaveBeenCalledWith('viewState.viewEnter', { title: 'Me Title', navDirection: undefined });
 
     scope.$navDirection = 'forward';
-    element = compile('<view title="\'Me Title\'"></view>')(scope);
+    element = compile('<ion-view title="\'Me Title\'"></ion-view>')(scope);
     expect(scope.$broadcast).toHaveBeenCalledWith('viewState.viewEnter', { title: 'Me Title', navDirection: 'forward' });
   });
 
   it('should set hide back button', function() {
     spyOn(scope, '$broadcast');
 
-    var element = compile('<view></view>')(scope);
+    var element = compile('<ion-view></ion-view>')(scope);
     var viewScope = element.isolateScope();
     expect(viewScope.hideBackButton).toBeUndefined();
     expect(scope.$broadcast).not.toHaveBeenCalledWith('viewState.showBackButton', false);
 
-    element = compile('<view hide-back-button="true"></view>')(scope);
+    element = compile('<ion-view hide-back-button="true"></ion-view>')(scope);
     viewScope = element.isolateScope();
     expect(viewScope.hideBackButton).toEqual(true);
     expect(scope.$broadcast).toHaveBeenCalledWith('viewState.showBackButton', false);
   });
 
   it('should add/remove back button based on events', function() {
-    var element = compile('<nav-bar back-button-label="Back"></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar back-button-label="Back"></ion-nav-bar>')(scope);
     scope.$apply();
     function backButton() {
       return angular.element(element[0].querySelector('.back-button'));
@@ -71,7 +71,7 @@ describe('Ionic View', function() {
   });
 
   it('should show/hide navBar', function() {
-    var element = compile('<nav-bar></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar></ion-nav-bar>')(scope);
     scope.$digest();
     expect(element.hasClass('invisible')).toEqual(true);
     scope.$broadcast('viewState.showNavBar', true);
@@ -83,7 +83,7 @@ describe('Ionic View', function() {
   });
 
   it('should have have animateEnabled=true if there is a navDirection and animate isnt false', function() {
-    var element = compile('<nav-bar></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar></ion-nav-bar>')(scope);
     scope.$digest();
     scope = element.isolateScope();
 
@@ -101,7 +101,7 @@ describe('Ionic View', function() {
   });
 
   it('should hide navBar when using view attr', function() {
-    var element = compile('<div><nav-bar></nav-bar><view hide-nav-bar="true"></view></div>')(scope);
+    var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view hide-nav-bar="true"></ion-view></div>')(scope);
     scope.$digest();
     var navBar = element.find('header')
     expect(navBar.hasClass('invisible')).toEqual(true);
@@ -109,7 +109,7 @@ describe('Ionic View', function() {
 
   it('should show and update navBar title when using view attr or events', function() {
     scope.viewTitle = 'Title';
-    var element = compile('<div><nav-bar></nav-bar><view title="viewTitle"></view></div>')(scope);
+    var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view title="viewTitle"></ion-view></div>')(scope);
     scope.$digest();
     var navBar = element.find('header');
     var title = navBar.find('h1');
@@ -135,7 +135,7 @@ describe('Ionic View', function() {
       type: 'button',
       content: 'Right Button'
     }];
-    var element = compile('<div><nav-bar></nav-bar><view left-buttons="leftButtons" right-buttons="rightButtons"></view></div>')(scope);
+    var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view left-buttons="leftButtons" right-buttons="rightButtons"></ion-view></div>')(scope);
     scope.$digest();
 
     var leftButton = angular.element(element[0].querySelector('.left-buttons')).find('button');
@@ -177,55 +177,55 @@ describe('Ionic View', function() {
   });
 
   it('should show navbar when not using view attr', function() {
-    var element = compile('<div><nav-bar></nav-bar><view></view></div>')(scope);
+    var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view></ion-view></div>')(scope);
     scope.$digest();
     var navBar = element.find('header')
     expect(navBar.hasClass('invisible')).toEqual(false);
   });
 
   it('should set the navBar type', function() {
-    var element = compile('<nav-bar type="bar-positive"></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar type="bar-positive"></ion-nav-bar>')(scope);
     scope.$digest();
     expect(element.hasClass('bar-positive')).toEqual(true);
   });
 
   it('should not have the back button if no back button attributes set', function() {
-    var element = compile('<nav-bar></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar></ion-nav-bar>')(scope);
     scope.$digest();
     var backButton = angular.element(element[0].querySelector('.back-button'));
     expect(backButton.length).toEqual(0);
   });
 
   it('should have the back button if back-button-type attributes set', function() {
-    var element = compile('<nav-bar back-button-type="button-icon"></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar back-button-type="button-icon"></ion-nav-bar>')(scope);
     scope.$digest();
     var backButton = angular.element(element[0].querySelector('.back-button'));
     expect(backButton.length).toEqual(1);
   });
 
   it('should have the back button if back-button-icon attributes set', function() {
-    var element = compile('<nav-bar back-button-icon="ion-back"></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar back-button-icon="ion-back"></ion-nav-bar>')(scope);
     scope.$digest();
     var backButton = angular.element(element[0].querySelector('.back-button'));
     expect(backButton.length).toEqual(1);
   });
 
   it('should have the back button if back-button-label attributes set', function() {
-    var element = compile('<nav-bar back-button-label="Button"></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar back-button-label="Button"></ion-nav-bar>')(scope);
     scope.$digest();
     var backButton = angular.element(element[0].querySelector('.back-button'));
     expect(backButton.length).toEqual(1);
   });
 
   it('should have the back button if all back button attributes set', function() {
-    var element = compile('<nav-bar back-button-type="button-icon" back-button-icon="ion-back" back-button-label="Button"></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar back-button-type="button-icon" back-button-icon="ion-back" back-button-label="Button"></ion-nav-bar>')(scope);
     scope.$digest();
     var backButton = angular.element(element[0].querySelector('.back-button'));
     expect(backButton.length).toEqual(1);
   });
 
   it('should set just a back button icon, no text', function() {
-    var element = compile('<nav-bar back-button-icon="ion-back" back-button-type="button-icon"></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar back-button-icon="ion-back" back-button-type="button-icon"></ion-nav-bar>')(scope);
     scope.$digest();
     var backButton = angular.element(element[0].querySelector('.back-button'));
     expect(backButton.hasClass('button')).toEqual(true);
@@ -237,7 +237,7 @@ describe('Ionic View', function() {
   });
 
   it('should set just a back button with only text, button-clear', function() {
-    var element = compile('<nav-bar back-button-label="Back" back-button-type="button-clear"></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar back-button-label="Back" back-button-type="button-clear"></ion-nav-bar>')(scope);
     scope.$apply();
     var backButton = angular.element(element[0].querySelector('.back-button'));
     expect(backButton.hasClass('button')).toEqual(true);
@@ -247,7 +247,7 @@ describe('Ionic View', function() {
   });
 
   it('should set a back button with an icon and text, button-icon', function() {
-    var element = compile('<nav-bar back-button-icon="ion-back" back-button-label="Back" back-button-type="button-icon"></nav-bar>')(scope);
+    var element = compile('<ion-nav-bar back-button-icon="ion-back" back-button-label="Back" back-button-type="button-icon"></ion-nav-bar>')(scope);
     scope.$digest();
     var backButton = angular.element(element[0].querySelector('.back-button'));
     expect(backButton.hasClass('button')).toEqual(true);
diff --git a/js/ext/angular/test/header.html b/js/ext/angular/test/header.html
index 74805b1843..abc13ca637 100644
--- a/js/ext/angular/test/header.html
+++ b/js/ext/angular/test/header.html
@@ -9,16 +9,16 @@
     <script src="../../../../dist/js/ionic.bundle.js"></script>
   </head>
   <body ng-controller="TestCtrl">
-    <header-bar
+    <ion-header-bar
       title="headerTitle"
       left-buttons="leftButtons"
       right-buttons="rightButtons"
-      type="bar-primary"></header-bar>
-    <header-bar type="bar-positive" title="headerTitle" left-buttons="leftButtons" right-buttons="rightButtons"></header-bar>
+      type="bar-primary"></ion-header-bar>
+    <ion-header-bar type="bar-positive" title="headerTitle" left-buttons="leftButtons" right-buttons="rightButtons"></ion-header-bar>
 
-    <content>
+    <ion-content>
       <input type="text" ng-model="headerTitle">
-    </content>
+    </ion-content>
     <script>
       angular.module('headerTest', ['ionic'])
 
diff --git a/js/ext/angular/test/input.html b/js/ext/angular/test/input.html
index 9d7682bbec..738b5f4e11 100644
--- a/js/ext/angular/test/input.html
+++ b/js/ext/angular/test/input.html
@@ -17,14 +17,14 @@
   </head>
   <body ng-controller="AppCtrl">
 
-    <view id="view">
+    <ion-view id="view">
       <header>
         <label class="item item-input">
           <span class="input-label">Header</span>
           <input type="text" value="header input">
         </label>
       </header>
-      <content has-header="true" padding="true" overflow-scroll="false">
+      <ion-content has-header="true" padding="true" overflow-scroll="false">
         <div class="list">
           <label class="item item-input">
             <span class="input-label">Your Name</span>
@@ -62,16 +62,16 @@
           <a href="tapInputs.html">Tap Inputs</a> -
           <a href="/test/">CSS Tests</a>
         </p>
-      </content>
-    </view>
+      </ion-content>
+    </ion-view>
 
     <script id="modal.html" type="text/ng-template">
       <div class="modal" ng-controller="ModalCtrl">
         <header class="bar bar-header bar-positive">
           <h1 class="title">New Contact</h1>
-          <button class="button button-clear button-primary" ng-click="closeModal()" stop-event="click">Cancel</button>
+          <button class="button button-clear button-primary" ng-click="closeModal()" ion-stop-event="click">Cancel</button>
         </header>
-        <content has-header="true">
+        <ion-content has-header="true">
           <div class="padding">
             <div class="list">
               <label class="item item-input">
@@ -89,7 +89,7 @@
               <button class="button button-full button-positive" ng-click="closeModal()">Create</button>
             </div>
           </div>
-        </content>
+        </ion-content>
       </div>
     </script>
 
diff --git a/js/ext/angular/test/list-fit.html b/js/ext/angular/test/list-fit.html
index e33190c3e3..62b9333249 100644
--- a/js/ext/angular/test/list-fit.html
+++ b/js/ext/angular/test/list-fit.html
@@ -12,14 +12,14 @@
 
   <body>
 
-    <header-bar title="'Sample UL'" type="bar-positive"></header-bar>
+    <ion-header-bar title="'Sample UL'" type="bar-positive"></ion-header-bar>
 
-    <content has-header="true" scroll="true" ng-controller="ContentCtrl" on-refresh="onRefresh()" has-footer="true" padding="false">
+    <ion-content has-header="true" scroll="true" ng-controller="ContentCtrl" on-refresh="onRefresh()" has-footer="true" padding="false">
 
-      <refresher></refresher>
+      <ion-refresher></ion-refresher>
 
       <ul class="list">
-        <li class="item">This list should *exactly* fit</li>
+        <li class="item">This ion-list should *exactly* fit</li>
         <li class="item">between header and footer (no gap),</li>
         <li class="item">even with pull-to-refresh.</li>
         <li class="item">4</li>
@@ -46,11 +46,11 @@
         <li class="item">25</li>
         <li class="item">26</li>
        </ul>
-    </content>
+    </ion-content>
 
-    <footer-bar type="bar-assertive">
+    <ion-footer-bar type="bar-assertive">
       <h1 class="title">Footer!</h1>
-    </footer-bar>
+    </ion-footer-bar>
 
   <script>
 function ContentCtrl($scope, $timeout) {
diff --git a/js/ext/angular/test/list.html b/js/ext/angular/test/list.html
index a40a973eb4..37e925107b 100644
--- a/js/ext/angular/test/list.html
+++ b/js/ext/angular/test/list.html
@@ -78,7 +78,7 @@
   </head>
   <body ng-controller="TestCtrl">
 
-    <pane>
+    <ion-pane>
 
       <header class="bar bar-header bar-positive">
         <div class="buttons">
@@ -90,7 +90,7 @@
         </div>
       </header>
 
-      <content has-header="true">
+      <ion-content has-header="true">
 
         <div contenteditable="true">
           Hello!
@@ -98,7 +98,7 @@
           Hello!
         </div>
 
-        <list show-delete="isDeletingItems"
+        <ion-list show-delete="isDeletingItems"
               show-reorder="isReorderingItems"
               on-refresh-holding="refreshHolding()"
               on-refresh-opening="refreshOpening(ratio)"
@@ -115,11 +115,11 @@
               option-buttons="optionButtons1">
 
           <!-- shows that the item directive does not need attributes and can get values from the list attributes -->
-          <item item="item" ng-click="itemClick()" class="item-message" ng-repeat="item in items" ng-class="{ active: item.isActive}">
+          <ion-item ion-item="item" ng-click="itemClick()" class="item-message" ng-repeat="item in items" ng-class="{ active: item.isActive}">
             <img ng-src="{{item.face}}">
             <h2>{{item.from}}</h2>
             <p>{{item.text}}</p>
-          </item>
+          </ion-item>
 
           <!-- shows how a divider could be included-->
           <div class="item item-divider">
@@ -127,17 +127,17 @@
           </div>
 
           <!-- shows it can override the attributes set by the list -->
-          <item can-delete="false"
+          <ion-item can-delete="false"
                 can-reorder="false"
                 can-swipe="false"
                 item-type="item-icon-left item-icon-right">
             <i class="icon ion-stats-bars"></i>
             Individual item directive, but can't do much. Overrides list attributes with its own left and right icons.
             <i class="icon ion-arrow-graph-up-right"></i>
-          </item>
+          </ion-item>
 
           <!-- shows that the item directive can receive many attributes and overrides the list attributes -->
-          <item on-delete="deleteItem(item)"
+          <ion-item on-delete="deleteItem(item)"
                 delete-icon="ion-trash-a"
                 reorder-icon="ion-navicon-round"
                 can-delete="true"
@@ -145,7 +145,7 @@
                 option-buttons="optionButtons2">
             <i class="icon ion-person-stalker"></i>
             Individual item directive and overrides list attrs with item attributes
-          </item>
+          </ion-item>
 
           <!-- shows how a divider could be included-->
           <div class="item item-divider">
@@ -165,28 +165,28 @@
           </a>
           <input type="text" placeholder="text input">
           <div class="item">
-            <slide-box show-pager="false">
-              <slide>
+            <ion-slide-box show-pager="false">
+              <ion-slide>
                 <div class="box blue">
                   <h1>BLUE {{slideBox.slideIndex}}</h1>
                 </div>
-              </slide>
-              <slide>
+              </ion-slide>
+              <ion-slide>
                 <div class="box yellow">
                   <h1>YELLOW {{slideBox.slideIndex}}</h1>
                 </div>
-              </slide>
-              <slide>
+              </ion-slide>
+              <ion-slide>
                 <div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>
-              </slide>
-            </slide-box>
+              </ion-slide>
+            </ion-slide-box>
           </div>
 
-        </list>
+        </ion-list>
 
-      </content>
+      </ion-content>
 
-    </pane>
+    </ion-pane>
 
     <script>
       angular.module('navTest', ['ionic'])
diff --git a/js/ext/angular/test/modal.html b/js/ext/angular/test/modal.html
index 7b69a9a4f0..79ce482420 100644
--- a/js/ext/angular/test/modal.html
+++ b/js/ext/angular/test/modal.html
@@ -9,17 +9,17 @@
     <script src="../../../../dist/js/ionic.bundle.js"></script>
   </head>
   <body>
-    <pane ng-controller="AppCtrl">
-        <header-bar type="bar-positive" title="'Contacts'" right-buttons="contactsRightButtons">
-        </header-bar>
-        <content has-header="true">
-          <list>
-            <item ng-repeat="contact in contacts">
+    <ion-pane ng-controller="AppCtrl">
+        <ion-header-bar type="bar-positive" title="'Contacts'" right-buttons="contactsRightButtons">
+        </ion-header-bar>
+        <ion-content has-header="true">
+          <ion-list>
+            <ion-item ng-repeat="contact in contacts">
               {{contact.name}}
-            </item>
-          </list>
-        </content>
-    </pane>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+    </ion-pane>
 
     <script id="modal.html" type="text/ng-template">
       <div class="modal" ng-controller="ModalCtrl">
@@ -27,7 +27,7 @@
           <h1 class="title">New Contact</h1>
           <button class="button button-clear button-primary" ng-click="close()">Cancel</button>
         </header>
-        <content has-header="true">
+        <ion-content has-header="true">
           <div class="padding">
             <div class="list">
               <label class="item item-input">
@@ -45,7 +45,7 @@
               <button class="button button-full button-positive" ng-click="closeModal()">Create</button>
             </div>
           </div>
-        </content>
+        </ion-content>
       </div>
     </script>
 
diff --git a/js/ext/angular/test/nestedScroll.html b/js/ext/angular/test/nestedScroll.html
index 33c7dea1cb..e45ca06e01 100644
--- a/js/ext/angular/test/nestedScroll.html
+++ b/js/ext/angular/test/nestedScroll.html
@@ -13,16 +13,16 @@
   <body>
 
     <div ng-controller="Ctrl">
-      <header-bar title="title" type="bar-positive">
-      </header-bar>
-      <content has-header="true" style="background: lightblue;">
+      <ion-header-bar title="title" type="bar-positive">
+      </ion-header-bar>
+      <ion-content has-header="true" style="background: lightblue;">
         <h1>outer</h1>
-        <scroll style="background: lightgreen; height: 200px;">
+        <ion-scroll style="background: lightgreen; height: 200px;">
           <h1>inner</h1>
           <p ng-repeat="i in range">{{i}}</p>
-        </scroll>
+        </ion-scroll>
         <p ng-repeat="i in range">{{i}}</p>
-      </content>
+      </ion-content>
     </div>
 <script>
 function Ctrl($scope) {
diff --git a/js/ext/angular/test/overflow.html b/js/ext/angular/test/overflow.html
index 0b91b4d7ad..3f750b5b7a 100644
--- a/js/ext/angular/test/overflow.html
+++ b/js/ext/angular/test/overflow.html
@@ -49,11 +49,11 @@
 
   </head>
   <body ng-controller="AppCtrl">
-      <side-menus>
-        <pane side-menu-content>
-          <header-bar
+      <ion-side-menus>
+        <ion-pane ion-side-menu-content>
+          <ion-header-bar
             title="'Title'"
-            type="bar-primary"></header-bar>
+            type="bar-primary"></ion-header-bar>
 
           <div class="bar bar-subheader">
             <div class="button-bar">
@@ -63,7 +63,7 @@
             </div>
           </div>
 
-          <content
+          <ion-content
             has-header="false"
             has-subheader="true"
             has-footer="true"
@@ -71,37 +71,37 @@
             >
 
             <div style="height: 3000px; width: 100%; background: url('tree_bark.png') repeat"></div>
-          </content>
+          </ion-content>
 
-          <footer-bar type="bar-assertive">
+          <ion-footer-bar type="bar-assertive">
             <h1 class="title">Footer</h1>
-          </footer-bar>
-        </pane>
-        <side-menu side="left">
+          </ion-footer-bar>
+        </ion-pane>
+        <ion-side-menu side="left">
           <header class="bar bar-header bar-assertive">
             <h1 class="title">Left</h1>
           </header>
-          <content has-header="true" overflow-scroll="true">
+          <ion-content has-header="true" overflow-scroll="true">
             <ul class="list">
               <a href="#" class="item" ng-repeat="item in list">
                 {{item.text}}
               </a>
             </ul>
-          </content>
-        </side-menu>
-        <side-menu side="right">
+          </ion-content>
+        </ion-side-menu>
+        <ion-side-menu side="right">
           <header class="bar bar-header bar-assertive">
             <h1 class="title">Right</h1>
           </header>
-          <content has-header="true">
+          <ion-content has-header="true">
             <ul class="list">
               <a href="#" class="item" ng-repeat="item in list">
                 {{item.text}}
               </a>
             </ul>
-          </content>
-        </side-menu>
-      </side-menus>
+          </ion-content>
+        </ion-side-menu>
+      </ion-side-menus>
 
     <script>
       angular.module('navTest', ['ionic'])
diff --git a/js/ext/angular/test/radioButton.html b/js/ext/angular/test/radioButton.html
index 5d5830c996..4558ca0e71 100644
--- a/js/ext/angular/test/radioButton.html
+++ b/js/ext/angular/test/radioButton.html
@@ -13,14 +13,14 @@
     <header class="bar bar-header bar-danger">
       <h1 class="title">Beans</h1>
     </header>
-    <content has-header="true"class="reveal-animation">
+    <ion-content has-header="true"class="reveal-animation">
       <div ng-controller="TestCtrl">
 
         <div class="list">
           <label class="item item-input">
             <span class="input-label">Units</span>
 
-            <!--<radio-buttons ng-model="data.isLovely">-->
+            <!--<ion-radio-buttons ng-model="data.isLovely">-->
             <div class="button-bar">
               <button class="button button-assertive button-radio" ng-value="'magical'" ng-click="magical()">Magical</button>
               <button class="button button-assertive button-radio" ng-value="'black'">Black</button>
@@ -34,7 +34,7 @@
           <button ng-click="doIt()" class="button button-warning">Print</button>
         </form>
       </div>
-    </content>
+    </ion-content>
 
     <script>
       angular.module('radioButtonTest', ['ionic'])
diff --git a/js/ext/angular/test/scroll.html b/js/ext/angular/test/scroll.html
index 3e4488a6fe..cec287aa5e 100644
--- a/js/ext/angular/test/scroll.html
+++ b/js/ext/angular/test/scroll.html
@@ -48,11 +48,11 @@
     </style>
   </head>
   <body ng-controller="ThisCtrl">
-    <pane>
+    <ion-pane>
 
-      <content has-header="true" scroll="false">
+      <ion-content has-header="true" scroll="false">
         <h3>Hourly Forecast</h3>
-        <scroll direction="x" style="width: 100%; height: 20%;">
+        <ion-scroll direction="x" style="width: 100%; height: 20%;">
           <div class="hours">
             <div ng-repeat="hour in hours">
               <div class="icons">
@@ -65,15 +65,15 @@
               </div>
             </div>
           </div>
-        </scroll>
+        </ion-scroll>
         <a class="button" ng-click="scrollTo()">
           Scroll to 100
         </a>
-        <scroll direction="y" style="height: 400px; width: 300px; background: red;">
+        <ion-scroll direction="y" style="height: 400px; width: 300px; background: red;">
           <div style="width: 100px; height: 4000px; background: url('tree_bark.png') repeat"></div>
-        </scroll>
-      </content>
-    </pane>
+        </ion-scroll>
+      </ion-content>
+    </ion-pane>
 
     <script>
       angular.module('navTest', ['ionic'])
diff --git a/js/ext/angular/test/service/delegates/ionicScrollDelegate.unit.js b/js/ext/angular/test/service/delegates/ionicScrollDelegate.unit.js
index 33fc4831a3..a958c3b985 100644
--- a/js/ext/angular/test/service/delegates/ionicScrollDelegate.unit.js
+++ b/js/ext/angular/test/service/delegates/ionicScrollDelegate.unit.js
@@ -13,14 +13,14 @@ describe('Ionic ScrollDelegate Service', function() {
 
   it('Should get scroll view', function() {
     var scope = rootScope.$new();
-    var el = compile('<content></content>')(scope);
+    var el = compile('<ion-content></ion-content>')(scope);
     var sv = del.getScrollView(scope);
     expect(sv).not.toBe(undefined);
   });
 
   it('should resize', function() {
     var scope = rootScope.$new();
-    var el = compile('<content></content>')(scope);
+    var el = compile('<ion-content></ion-content>')(scope);
 
     var sv = del.getScrollView(scope);
     spyOn(sv, 'resize');
@@ -69,7 +69,7 @@ describe('Ionic ScrollDelegate Service', function() {
       });
       it('should resize & scroll top', function() {
         var scope = rootScope.$new();
-        var el = compile('<content start-y="100"></content>')(scope);
+        var el = compile('<ion-content start-y="100"></ion-content>')(scope);
 
         var sv = del.getScrollView(scope);
         spyOn(sv, 'resize');
@@ -83,7 +83,7 @@ describe('Ionic ScrollDelegate Service', function() {
 
       it('should resize & scroll bottom', function() {
         var scope = rootScope.$new();
-        var el = compile('<content start-y="100"><br/><br/></content>')(scope);
+        var el = compile('<ion-content start-y="100"><br/><br/></ion-content>')(scope);
 
         var sv = del.getScrollView(scope);
         spyOn(sv, 'getScrollMax').andCallFake(function() {
@@ -101,7 +101,7 @@ describe('Ionic ScrollDelegate Service', function() {
 
       it('should resize & scrollTo', function() {
         var scope = rootScope.$new();
-        var el = compile('<content start-y="100"><br/><br/></content>')(scope);
+        var el = compile('<ion-content start-y="100"><br/><br/></ion-content>')(scope);
 
         var sv = del.getScrollView(scope);
         spyOn(sv, 'scrollTo');
@@ -117,7 +117,7 @@ describe('Ionic ScrollDelegate Service', function() {
 
   it('should finish refreshing', function() {
     var scope = rootScope.$new();
-    var el = compile('<content start-y="100"></content>')(scope);
+    var el = compile('<ion-content start-y="100"></ion-content>')(scope);
 
     var sv = del.getScrollView(scope);
     spyOn(sv, 'finishPullToRefresh');
@@ -144,7 +144,7 @@ describe('anchorScroll', function() {
       var contentEl, scope, del, timeout;
       beforeEach(inject(function($rootScope, $compile, $timeout, $document, $ionicScrollDelegate) {
         scope = $rootScope.$new();
-        contentEl = $compile('<content></content>')(scope);
+        contentEl = $compile('<ion-content></ion-content>')(scope);
 
         document.body.appendChild(contentEl[0]);
         del = $ionicScrollDelegate;
diff --git a/js/ext/angular/test/service/delegates/sideMenuDelegate.unit.js b/js/ext/angular/test/service/delegates/sideMenuDelegate.unit.js
index f5e2a48f5e..b7411cd6ca 100644
--- a/js/ext/angular/test/service/delegates/sideMenuDelegate.unit.js
+++ b/js/ext/angular/test/service/delegates/sideMenuDelegate.unit.js
@@ -13,7 +13,7 @@ describe('Ionic SideMenuDelegate Service', function() {
 
   it('Should get from scope', function() {
     var scope = rootScope.$new();
-    var el = compile('<side-menus></side-menus>')(scope);
+    var el = compile('<ion-side-menus></ion-side-menus>')(scope);
     var sc = del.getSideMenuController(scope);
 
     expect(sc).not.toBe(undefined);
diff --git a/js/ext/angular/test/sideMenu.html b/js/ext/angular/test/sideMenu.html
index 2b5d8fcba2..1a2ce34ac4 100644
--- a/js/ext/angular/test/sideMenu.html
+++ b/js/ext/angular/test/sideMenu.html
@@ -11,43 +11,43 @@
   <body>
 
     <div ng-controller="MenuCtrl">
-      <side-menus>
-        <pane side-menu-content drag-content="$root.$draggy">
+      <ion-side-menus>
+        <ion-pane ion-side-menu-content drag-content="$root.$draggy">
           <header class="bar bar-header bar-assertive">
             <button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i></button>
             <h1 class="title">Slide me</h1>
           </header>
-          <content has-header="true">
-            <toggle ng-model="$root.$draggy">Hello</toggle>
+          <ion-content has-header="true">
+            <ion-toggle ng-model="$root.$draggy">Hello</ion-toggle>
             <input type="range" ng-model="$root.menuWidth" min="0" max="300">
             <h1>Content</h1>
-          </content>
-        </pane>
-        <side-menu side="left" width="$root.menuWidth || 200">
+          </ion-content>
+        </ion-pane>
+        <ion-side-menu side="left" width="$root.menuWidth || 200">
           <header class="bar bar-header bar-assertive">
             <h1 class="title">Left</h1>
           </header>
-          <content has-header="true">
+          <ion-content has-header="true">
             <ul class="list">
               <a href="#" class="item" ng-repeat="item in list">
                 {{item.text}}
               </a>
             </ul>
-          </content>
-        </side-menu>
-        <side-menu side="right">
+          </ion-content>
+        </ion-side-menu>
+        <ion-side-menu side="right">
           <header class="bar bar-header bar-assertive">
             <h1 class="title">Right</h1>
           </header>
-          <content>
+          <ion-content>
             <ul class="list">
               <a href="#" class="item" ng-repeat="item in list">
                 {{item.text}}
               </a>
             </ul>
-          </content>
-        </side-menu>
-      </side-menus>
+          </ion-content>
+        </ion-side-menu>
+      </ion-side-menus>
     </div>
     <script>
       angular.module('sideMenuTest', ['ionic'])
diff --git a/js/ext/angular/test/sideMenu2.html b/js/ext/angular/test/sideMenu2.html
index 7f8c23990b..3fee4c1424 100644
--- a/js/ext/angular/test/sideMenu2.html
+++ b/js/ext/angular/test/sideMenu2.html
@@ -11,24 +11,24 @@
   <body>
 
     <div ng-controller="MainCtrl">
-      <nav-view></nav-view>
+      <ion-nav-view></ion-nav-view>
     </div>
 
     <script id="event-menu.html" type="text/ng-template">
-      <side-menus>
+      <ion-side-menus>
 
-        <pane side-menu-content>
-          <nav-bar type="bar-positive"
+        <ion-pane ion-side-menu-content>
+          <ion-nav-bar type="bar-positive"
                    back-button-type="button-icon"
-                   back-button-icon="ion-ios7-arrow-back"></nav-bar>
-          <nav-view name="menuContent"></nav-view>
-        </pane>
+                   back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>
+          <ion-nav-view name="menuContent"></ion-nav-view>
+        </ion-pane>
 
-        <side-menu side="left">
+        <ion-side-menu side="left">
           <header class="bar bar-header bar-assertive">
             <div class="title">Left Menu</div>
           </header>
-          <content has-header="true">
+          <ion-content has-header="true">
             <div class="list">
               <a href="#/event/check-in" class="item">Check-in</a>
               <a href="#/event/attendees" class="item">Attendees</a>
@@ -41,28 +41,28 @@
                 <i class="icon ion-volume-high"></i>
               </div>
             </div>
-          </content>
-        </side-menu>
+          </ion-content>
+        </ion-side-menu>
 
-      </side-menus>
+      </ion-side-menus>
     </script>
 
     <script id="home.html" type="text/ng-template">
-      <view title="'Welcome'">
-        <content has-header="true" padding="true">
+      <ion-view title="'Welcome'">
+        <ion-content has-header="true" padding="true">
           <p>Swipe to the right to reveal the left menu.</p>
           <div class="button" ng-click="sideMenuController.toggleLeft()" style="position: absolute; left: 100px; top: 200px;">
             Left Menu
           </div>
           <p ng-repeat="p in range">{{$index}}....</p>
           <p>(On desktop click and drag from left to right)</p>
-        </content>
-      </view>
+        </ion-content>
+      </ion-view>
     </script>
 
     <script id="check-in.html" type="text/ng-template">
-      <view title="'Event Check-in'">
-        <content has-header="true">
+      <ion-view title="'Event Check-in'">
+        <ion-content has-header="true">
           <form class="list" ng-show="showForm">
             <div class="item item-divider">
               Attendee Info
@@ -76,17 +76,17 @@
             <div class="item item-divider">
               Shirt Size
             </div>
-            <radio ng-repeat="shirtSize in shirtSizes"
+            <ion-radio ng-repeat="shirtSize in shirtSizes"
                    ng-value="shirtSize.value"
                    ng-model="attendee.shirtSize">
               {{ shirtSize.text }}
-            </radio>
+            </ion-radio>
             <div class="item item-divider">
               Lunch
             </div>
-            <toggle ng-model="attendee.vegetarian">
+            <ion-toggle ng-model="attendee.vegetarian">
               Vegetarian
-            </toggle>
+            </ion-toggle>
             <div class="padding">
               <button class="button button-block" ng-click="submit()">Checkin</button>
             </div>
@@ -96,20 +96,20 @@
             <pre ng-bind="attendee | json"></pre>
             <a href="#/event/attendees">View attendees</a>
           </div>
-        </content>
-      </view>
+        </ion-content>
+      </ion-view>
     </script>
 
     <script id="attendees.html" type="text/ng-template">
-      <view title="'Event Attendees'">
-        <content has-header="true">
+      <ion-view title="'Event Attendees'">
+        <ion-content has-header="true">
           <div class="list">
-            <toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
+            <ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
                     ng-model="attendee.arrived"
                     ng-change="arrivedChange(attendee)">
               {{ attendee.firstname }}
               {{ attendee.lastname }}
-            </toggle>
+            </ion-toggle>
             <div class="item item-divider">
               Activity
             </div>
@@ -117,8 +117,8 @@
               {{ msg }}
             </div>
           </div>
-        </content>
-      </view>
+        </ion-content>
+      </ion-view>
     </script>
 
     <script>
diff --git a/js/ext/angular/test/slideBox.html b/js/ext/angular/test/slideBox.html
index d7955a2683..5278331827 100644
--- a/js/ext/angular/test/slideBox.html
+++ b/js/ext/angular/test/slideBox.html
@@ -43,11 +43,11 @@
   <body>
 
     <div ng-controller="SlideCtrl">
-      <side-menus>
-        <pane side-menu-content>
-          <header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
-          <slide-box on-slide-changed="slideChanged(index)">
-            <slide ng-controller="FirstSlideCtrl">
+      <ion-side-menus>
+        <ion-pane ion-side-menu-content>
+          <ion-header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></ion-header-bar>
+          <ion-slide-box on-slide-changed="slideChanged(index)">
+            <ion-slide ng-controller="FirstSlideCtrl">
               <h3>Thank you for choosing the Awesome App!</h3>
               <div id="logo">
                 <img src="app_icon.png">
@@ -61,8 +61,8 @@
               <p>
                 <button class="button button-dark" ng-click="toLast()">Skip to last</button>
               </p>
-            </slide>
-            <slide>
+            </ion-slide>
+            <ion-slide>
               <h3>Using Awesome</h3>
 
               <div id="list">
@@ -73,22 +73,22 @@
                   <li>There is no step 3</li>
                 </ol>
               </div>
-            </slide>
-            <slide>
-              <content has-header="true">
+            </ion-slide>
+            <ion-slide>
+              <ion-content has-header="true">
                 <div style="width: 300px; height: 2000px; background: url('tree_bark.png') repeat"></div>
-              </content>
-            </slide>
-          </slide-box>
-        </pane>
-        <side-menu side="left">
+              </ion-content>
+            </ion-slide>
+          </ion-slide-box>
+        </ion-pane>
+        <ion-side-menu side="left">
           <header class="bar bar-header bar-assertive">
             <h1 class="title">Right</h1>
           </header>
-          <content>
-          </content>
-        </side-menu>
-      </side-menus>
+          <ion-content>
+          </ion-content>
+        </ion-side-menu>
+      </ion-side-menus>
     </div>
     <script>
       angular.module('slideBoxTest', ['ionic'])
diff --git a/js/ext/angular/test/slideBoxDynamic.html b/js/ext/angular/test/slideBoxDynamic.html
index 58630a5ba8..4050ade81d 100644
--- a/js/ext/angular/test/slideBoxDynamic.html
+++ b/js/ext/angular/test/slideBoxDynamic.html
@@ -43,16 +43,16 @@
   <body>
 
     <div ng-controller="SlideCtrl">
-      <pane>
-        <header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
-        <content has-header="true">
-          <slide-box>
-            <slide ng-repeat="page in pages">
+      <ion-pane>
+        <ion-header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></ion-header-bar>
+        <ion-content has-header="true">
+          <ion-slide-box>
+            <ion-slide ng-repeat="page in pages">
               {{page.text}}
-            </slide>
-          </slide-box>
-        </content>
-      </pane>
+            </ion-slide>
+          </ion-slide-box>
+        </ion-content>
+      </ion-pane>
     </div>
     <script>
       angular.module('slideBoxTest', ['ionic'])
diff --git a/js/ext/angular/test/subControllers.html b/js/ext/angular/test/subControllers.html
index df4e679e1a..f357a641f1 100644
--- a/js/ext/angular/test/subControllers.html
+++ b/js/ext/angular/test/subControllers.html
@@ -10,8 +10,8 @@
   </head>
   <body>
 
-    <side-menus>
-      <pane side-menu-content>
+    <ion-side-menus>
+      <ion-pane ion-side-menu-content>
         <header class="bar bar-header bar-dark">
           <a href="#" class="button"><i class="icon-reorder"></i></a>
           <h1 class="title">Slide me</h1>
@@ -19,51 +19,51 @@
         <div class="content has-header">
           <h1>Slide me side to side!</h1>
         </div>
-      </pane>
-      <side-menu side="left">
+      </ion-pane>
+      <ion-side-menu side="left">
         <h2>Left</h2>
         <ul class="list">
           <a href="#" class="list-item" ng-repeat="item in list">
             {{item.text}}
           </a>
         </ul>
-      </side-menu>
-      <side-menu side="right">
-        <tabs>
-          <tab title="Home" icon="ion-home" class="tab-content">
+      </ion-side-menu>
+      <ion-side-menu side="right">
+        <ion-tabs>
+          <ion-tab title="Home" icon="ion-home" class="tab-content">
             <header class="bar bar-header bar-dark">
               <h1 class="title">Tab Bars</h1>
             </header>
-            <content has-header="true" has-tabs="true">
+            <ion-content has-header="true" has-tabs="true">
               <h1>Home</h1>
               <ul class="list">
                 <a href="#" class="list-item" ng-repeat="item in items">
                   {{item.title}}
                 </a>
               </ul>
-            </content>
-          </tab>
+            </ion-content>
+          </ion-tab>
 
-          <tab title="About" icon="ion-info" class="tab-content">
+          <ion-tab title="About" icon="ion-info" class="tab-content">
             <header class="bar bar-header bar-success">
               <h1 class="title">About</h1>
             </header>
-            <content has-header="true" has-tabs="true">
+            <ion-content has-header="true" has-tabs="true">
               <h1>About Us</h1>
-            </content>
-          </tab>
+            </ion-content>
+          </ion-tab>
 
-          <tab title="Settings" icon="icon-gear" class="tab-content">
+          <ion-tab title="Settings" icon="icon-gear" class="tab-content">
             <header class="bar bar-header bar-dark">
               <h1 class="title">Settings</h1>
             </header>
-            <content has-header="true" has-tabs="true">
+            <ion-content has-header="true" has-tabs="true">
               <h1>Settings</h1>
-            </content>
-          </tab>
-        </tabs>
-      </side-menu>
-    </side-menus>
+            </ion-content>
+          </ion-tab>
+        </ion-tabs>
+      </ion-side-menu>
+    </ion-side-menus>
     <script>
       angular.module('sideMenuTest', ['ionic']);
 
diff --git a/js/ext/angular/test/tabs.html b/js/ext/angular/test/tabs.html
index e44957852b..4d1ae3cd01 100644
--- a/js/ext/angular/test/tabs.html
+++ b/js/ext/angular/test/tabs.html
@@ -47,23 +47,23 @@
     <script src="../../../../dist/js/ionic.bundle.js"></script>
   </head>
   <body ng-controller="RootCtrl">
-    <tabs
+    <ion-tabs
           animation="fade-in-out"
           tabs-type="tabs-icon-only"
           tabs-style="tabs-top tabs-positive"
           controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
 
-          <tab title="<img src='http://placekitten.com/40/40'>" ng-controller="HomeCtrl">
+          <ion-tab title="<img src='http://placekitten.com/40/40'>" ng-controller="HomeCtrl">
         <header class="bar bar-header bar-positive">
           <button class="button button-icon icon ion-plus" ng-click="newTask()"></button>
           <h1 class="title">Tasks</h1>
           <button class="button button-clear" ng-click="isDeletingItems = !isDeletingItems">Edit</button>
         </header>
-        <content has-header="true" has-subheader="true" on-refresh="onRefresh()" on-scroll="scroll(scrollTop, scrollLeft)">
+        <ion-content has-header="true" has-subheader="true" on-refresh="onRefresh()" on-scroll="scroll(scrollTop, scrollLeft)">
 
-          <refresher></refresher>
+          <ion-refresher></ion-refresher>
 
-          <list scroll="false"
+          <ion-list ion-scroll="false"
                on-reorder="onReorder(el, start, end)"
                can-delete="true"
                can-reorder="true"
@@ -74,43 +74,43 @@
                delete-icon="ion-minus-circled"
                reorder-icon="ion-navicon">
 
-            <item ng-repeat="item in items"
+            <ion-item ng-repeat="item in items"
                   item="item">
               {{item.title}}
             </list-item>
-          </list>
+          </ion-list>
           <button ng-click="goTop()">Go Top</button>
-        </content>
-      </tab>
+        </ion-content>
+      </ion-tab>
 
-      <tab title="Deadlines" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline" badge-style="badge-light" badge="unreadDeadlines">
+      <ion-tab title="Deadlines" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline" badge-style="badge-light" badge="unreadDeadlines">
         <header class="bar bar-header bar-positive">
           <h1 class="title">Deadlines</h1>
         </header>
-        <content has-header="true" padding="true">
+        <ion-content has-header="true" padding="true">
           <h1>Deadlines</h1>
-        </content>
-      </tab>
+        </ion-content>
+      </ion-tab>
 
-      <tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
+      <ion-tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
         <header class="bar bar-header bar-positive">
           <h1 class="title">Settings</h1>
         </header>
-        <content has-header="true" padding="true">
+        <ion-content has-header="true" padding="true">
           <h1>Settings</h1>
-        </content>
-      </tab>
+        </ion-content>
+      </ion-tab>
 
-      <tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
+      <ion-tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
         <header class="bar bar-header bar-positive">
           <h1 class="title">Settings</h1>
         </header>
-        <content has-header="true" padding="true">
+        <ion-content has-header="true" padding="true">
           <h1>Settings</h1>
-        </content>
-      </tab>
+        </ion-content>
+      </ion-tab>
 
-    </tabs>
+    </ion-tabs>
 
     <script id="newTask.html" type="text/ng-template">
       <div id="task-view" class="modal slide-in-up" ng-controller="TaskCtrl">
diff --git a/js/ext/angular/test/tapInputs.html b/js/ext/angular/test/tapInputs.html
index 55af88599f..0c4b624b73 100755
--- a/js/ext/angular/test/tapInputs.html
+++ b/js/ext/angular/test/tapInputs.html
@@ -14,9 +14,9 @@
 <body>
 
   <div ng-controller="MyCtrl">
-    <header-bar title="'Tap Inputs'" type="bar-positive"></header-bar>
+    <ion-header-bar title="'Tap Inputs'" type="bar-positive"></ion-header-bar>
 
-    <content has-header="true">
+    <ion-content has-header="true">
       <form name="myForm">
 
         <div class="list">
@@ -24,44 +24,44 @@
           <div class="item item-divider">
             Checkbox
           </div>
-          <checkbox ng-model="value1">
+          <ion-checkbox ng-model="value1">
             Checkbox Value 1
-          </checkbox>
+          </ion-checkbox>
           <div class="item">
             Value 1:
             <input type="checkbox" ng-model="value1">
             {{value1}}
           </div>
-          <checkbox ng-model="value2" ng-true-value="YES" ng-false-value="NO">
+          <ion-checkbox ng-model="value2" ng-true-value="YES" ng-false-value="NO">
             Checkbox Value 2
-          </checkbox>
+          </ion-checkbox>
           <div class="item">
             Value 2:
             <input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO">
             {{value2}}
           </div>
-          <checkbox ng-model="value3" ng-checked="true" ng-true-value="yup" ng-false-value="nope">
+          <ion-checkbox ng-model="value3" ng-checked="true" ng-true-value="yup" ng-false-value="nope">
             Checkbox Initially checked with ng-checked=true, value: {{ value3 }}
-          </checkbox>
-          <checkbox ng-model="value4" ng-change="checkboxChange()" ng-true-value="yup" ng-false-value="nope">
+          </ion-checkbox>
+          <ion-checkbox ng-model="value4" ng-change="checkboxChange()" ng-true-value="yup" ng-false-value="nope">
             Checkbox Change: {{ value4ChangeValue }}
-          </checkbox>
+          </ion-checkbox>
 
           <div class="item item-divider">
             Toggle
           </div>
-          <toggle ng-model="toggle1">
+          <ion-toggle ng-model="toggle1">
             Toggle 1: {{ toggle1 }}
-          </toggle>
-          <toggle ng-model="toggle2" ng-true-value="yup" ng-false-value="nope">
+          </ion-toggle>
+          <ion-toggle ng-model="toggle2" ng-true-value="yup" ng-false-value="nope">
             Toggle 2: {{ toggle2 }}
-          </toggle>
-          <toggle ng-model="toggle3" ng-checked="true">
+          </ion-toggle>
+          <ion-toggle ng-model="toggle3" ng-checked="true">
             Toggle 3, ng-checked initially set to true, {{ toggle3 }}
-          </toggle>
-          <toggle ng-model="toggle4" ng-change="toggleChange()" ng-true-value="yup" ng-false-value="nope">
+          </ion-toggle>
+          <ion-toggle ng-model="toggle4" ng-change="toggleChange()" ng-true-value="yup" ng-false-value="nope">
             Toggle Change: {{ toggle4ChangeValue }}
-          </toggle>
+          </ion-toggle>
           <div class="item">
             Toggle 1:
             <input type="checkbox" ng-model="toggle1">,
@@ -72,13 +72,13 @@
           <div class="item item-divider">
             Radio
           </div>
-          <radio
+          <ion-radio
             ng-repeat="radioItem in radioItems"
             ng-value="radioItem.value"
             ng-model="selectedValues.radio"
             ng-change="radioChanged()">
               {{ radioItem.text }}
-          </radio>
+          </ion-radio>
           <div class="item">
             Selected Radio Value: {{ selectedValues.radio }},
             Changed: {{ radioChangeCount }},
@@ -105,7 +105,7 @@
 
       </form>
 
-    </content>
+    </ion-content>
   </div>
 
   <script>
diff --git a/js/ext/angular/test/toggle.html b/js/ext/angular/test/toggle.html
index d18f8f85cf..058808adf0 100644
--- a/js/ext/angular/test/toggle.html
+++ b/js/ext/angular/test/toggle.html
@@ -13,15 +13,15 @@
     <header class="bar bar-header bar-danger">
       <h1 class="title">Toggle</h1>
     </header>
-    <content has-header="true" class="reveal-animation">
+    <ion-content has-header="true" class="reveal-animation">
       <div ng-controller="TestCtrl">
 
         <div class="list">
-          <toggle ng-model="myModel" ng-disabled="isDisabled">myModel ({{!!myModel}})</toggle>
-          <toggle ng-model="isDisabled">Disable myModel ({{!!isDisabled}})</toggle>
+          <ion-toggle ng-model="myModel" ng-disabled="isDisabled">myModel ({{!!myModel}})</ion-toggle>
+          <ion-toggle ng-model="isDisabled">Disable myModel ({{!!isDisabled}})</ion-toggle>
         </div>
       </div>
-    </content>
+    </ion-content>
 
     <script>
       angular.module('toggleTest', ['ionic'])
diff --git a/js/ext/angular/test/viewState.html b/js/ext/angular/test/viewState.html
index 102daed6d3..ab7379a4ec 100644
--- a/js/ext/angular/test/viewState.html
+++ b/js/ext/angular/test/viewState.html
@@ -3,7 +3,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 
-    <title>navViews and tabs w/ nested navViews</title>
+    <title>navViews and ion-tabs w/ nested navViews</title>
 
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
     <script src="../../../../dist/js/ionic.bundle.js"></script>
@@ -12,17 +12,17 @@
   <body>
 
     <div ng-controller="AppCtrl">
-      <nav-bar animation="nav-title-slide-ios7"
+      <ion-nav-bar animation="nav-title-slide-ios7"
                type="bar-positive"
                back-button-type="button-icon"
                back-button-label=" Back"
-               back-button-icon="ion-arrow-left-c"></nav-bar>
-      <nav-view animation="slide-left-right"></nav-view>
+               back-button-icon="ion-arrow-left-c"></ion-nav-bar>
+      <ion-nav-view animation="slide-left-right"></ion-nav-view>
     </div>
 
     <script id="sign-in.html" type="text/ng-template">
-      <view title="'Sign-In'" left-buttons="leftButtons" right-buttons="rightButtons">
-        <content has-header="true">
+      <ion-view title="'Sign-In'" left-buttons="leftButtons" right-buttons="rightButtons">
+        <ion-content has-header="true">
           <div class="list">
             <label class="item item-input">
               <span class="input-label">Username</span>
@@ -48,14 +48,14 @@
               Forward View: {{ $viewHistory.forwardView }}
             </p>
           </div>
-        </content>
-      </view>
+        </ion-content>
+      </ion-view>
     </script>
 
     <script id="forgot-password.html" type="text/ng-template">
-      <view title="'Forgot Password'" hide-nav-bar="true">
-        <content has-header="true" padding="true">
-          <p>This view hides the nav bar using the hideNavBar attribute.</p>
+      <ion-view title="'Forgot Password'" hide-nav-bar="true">
+        <ion-content has-header="true" padding="true">
+          <p>This ion-view hides the nav bar using the hideNavBar attribute.</p>
           <p>
             <button ng-click="hideNavBar()">Hide Nav Bar</button>
             <button ng-click="showNavBar()">Show Nav Bar</button>
@@ -73,13 +73,13 @@
             Back View: {{ $viewHistory.backView }}<br>
             Forward View: {{ $viewHistory.forwardView }}
           </p>
-        </content>
-      </view>
+        </ion-content>
+      </ion-view>
     </script>
 
     <script id="contact.html" type="text/ng-template">
-      <view hide-back-button="true">
-        <content has-header="true" padding="true">
+      <ion-view hide-back-button="true">
+        <ion-content has-header="true" padding="true">
           <p>The views title is blank on purpose.</p>
           <p>The hideBackButton attribute is "true" for this view.</p>
           <p>@drifty</p>
@@ -93,29 +93,29 @@
             Back View: {{ $viewHistory.backView }}<br>
             Forward View: {{ $viewHistory.forwardView }}
           </p>
-        </content>
-      </view>
+        </ion-content>
+      </ion-view>
     </script>
 
     <script id="tabs.html" type="text/ng-template">
 
-      <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
+      <ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
 
-        <tab title="Automobiles" icon="ion-model-s" href="#/tabs/autos">
-          <nav-view name="auto-nav-view"></nav-view>
-        </tab>
+        <ion-tab title="Automobiles" icon="ion-model-s" href="#/tabs/autos">
+          <ion-nav-view name="auto-nav-view"></ion-nav-view>
+        </ion-tab>
 
-        <tab title="Add" icon="ion-plus-circled" href="#/tabs/add-auto">
-          <nav-view name="add-autos-nav-view"></nav-view>
-        </tab>
+        <ion-tab title="Add" icon="ion-plus-circled" href="#/tabs/add-auto">
+          <ion-nav-view name="add-autos-nav-view"></ion-nav-view>
+        </ion-tab>
 
-        <tab title="About" icon="ion-ios7-world" ui-sref="tabs.about">
-          <nav-view name="about-nav-view"></nav-view>
-        </tab>
+        <ion-tab title="About" icon="ion-ios7-world" ui-sref="tabs.about">
+          <ion-nav-view name="about-nav-view"></ion-nav-view>
+        </ion-tab>
 
-        <tab title="Info" icon="ion-information-circled">
-          <view title="'Information'">
-            <content has-header="true" has-tabs="true" padding="true">
+        <ion-tab title="Info" icon="ion-information-circled">
+          <ion-view title="'Information'">
+            <ion-content has-header="true" has-tabs="true" padding="true">
               <h3>Information</h3>
               <p>
                 This is a sample seed project for the Ionic Framework. Please change it to match your needs.
@@ -125,25 +125,25 @@
                 Back View: {{ $viewHistory.backView }}<br>
                 Forward View: {{ $viewHistory.forwardView }}
               </p>
-            </content>
-          </view>
-        </tab>
+            </ion-content>
+          </ion-view>
+        </ion-tab>
 
-        <tab title="Sign-Out" icon="ion-log-out" href="#/sign-in">
-        </tab>
+        <ion-tab title="Sign-Out" icon="ion-log-out" href="#/sign-in">
+        </ion-tab>
 
-      </tabs>
+      </ion-tabs>
 
     </script>
 
     <script id="auto-list.html" type="text/ng-template">
-      <view title="'Auto List'">
-        <content has-header="true" has-tabs="true">
-          <list>
-            <item ng-repeat="auto in autos" ng-href="#/tabs/autos/{{ $index }}">
+      <ion-view title="'Auto List'">
+        <ion-content has-header="true" has-tabs="true">
+          <ion-list>
+            <ion-item ng-repeat="auto in autos" ng-href="#/tabs/autos/{{ $index }}">
               {{ auto.year }} {{ auto.make }} {{ auto.model }}
-            </item>
-          </list>
+            </ion-item>
+          </ion-list>
           <p>
             <button ng-click="testStateGo()">Test State Go</button>
           </p>
@@ -152,13 +152,13 @@
             Back View: {{ $viewHistory.backView }}<br>
             Forward View: {{ $viewHistory.forwardView }}
           </p>
-        </content>
-      </view>
+        </ion-content>
+      </ion-view>
     </script>
 
     <script id="auto-detail.html" type="text/ng-template">
-      <view title="'Auto Details'">
-        <content has-header="true" has-tabs="true" padding="true">
+      <ion-view title="'Auto Details'">
+        <ion-content has-header="true" has-tabs="true" padding="true">
           <h2>{{ auto.year }} {{ auto.make }} {{ auto.model }}</h2>
           <p ng-bind="auto.desc"></p>
           <p><a class="button" ng-href="{{ auto.url }}">Read More</a></p>
@@ -189,13 +189,13 @@
             Back View: {{ $viewHistory.backView }}<br>
             Forward View: {{ $viewHistory.forwardView }}
           </p>
-        </content>
-      </view>
+        </ion-content>
+      </ion-view>
     </script>
 
     <script id="add-auto.html" type="text/ng-template">
-      <view title="'Add Auto'">
-        <content has-header="true" has-tabs="true">
+      <ion-view title="'Add Auto'">
+        <ion-content has-header="true" has-tabs="true">
 
           <div class="list">
             <label class="item item-input">
@@ -219,21 +219,21 @@
               Forward View: {{ $viewHistory.forwardView }}
             </p>
           </div>
-        </content>
-      </view>
+        </ion-content>
+      </ion-view>
     </script>
 
     <script id="about.html" type="text/ng-template">
-      <view title="'About'">
-        <content has-header="true" has-tabs="true" padding="true">
+      <ion-view title="'About'">
+        <ion-content has-header="true" has-tabs="true" padding="true">
           <h3>About this app!</h3>
           <p>
             Current View: {{ $viewHistory.currentView }}<br>
             Back View: {{ $viewHistory.backView }}<br>
             Forward View: {{ $viewHistory.forwardView }}
           </p>
-        </content>
-      </view>
+        </ion-content>
+      </ion-view>
     </script>
 
     <script>