diff --git a/ext/angular/src/ionicTabBar.js b/ext/angular/src/ionicTabBar.js
index a82bef2ddc..a0186470ea 100644
--- a/ext/angular/src/ionicTabBar.js
+++ b/ext/angular/src/ionicTabBar.js
@@ -1,6 +1,7 @@
 angular.module('ionic.ui.tabbar', {})
 
 .controller('TabBarCtrl', ['$scope', '$element', function($scope, $element) {
+  console.log('Tab controller');
   var tabs = $scope.tabs = [];
 
   
@@ -21,6 +22,7 @@ angular.module('ionic.ui.tabbar', {})
 
   this.selectTabAtIndex = function(index) {
     $scope.selectedIndex = index;
+    console.log('Scope selected tab is', index);
   };
 
   this.getNumTabs = function() {
@@ -49,7 +51,7 @@ angular.module('ionic.ui.tabbar', {})
     template: '<footer class="bar bar-tabs bar-footer bar-success">' + 
   '<nav class="tabs">' + 
     '<ul class="tabs-inner">' + 
-      '<tab-item ng-repeat="tab in tabs">' + 
+      '<tab-item text="Item" icon="icon-default" ng-repeat="tab in tabs">' + 
       '</tab-item>' +
     '</ul>' +
   '</nav>' +
@@ -65,21 +67,35 @@ angular.module('ionic.ui.tabbar', {})
     scope: {
       text: '@',
       icon: '@',
-      tabSelected: '@'
+      active: '=',
+      tabSelected: '@',
     },
-    link: function(scope, element, attrs, tabBar) {
-      // Set a default item text if none is provided
-      attrs.$observe('text', function(value) {
-        scope.text = value || 'Item';
-      });
+    compile: function(element, attrs, transclude) {
+      return function(scope, element, attrs, tabBarCtrl) {
+        var getActive, setActive;
+
+        scope.$watch('active', function(active) {
+          console.log('ACTIVE CHANGED', active);
+        });
+      };
+    },
+    link: function(scope, element, attrs, tabBarCtrl) {
+
+      // Store the index of this list item, which
+      // specifies which tab item it is
+      scope.tabIndex = element.index();
+
+      scope.active = true;
+
+      scope.selectTab = function(index) {
+        console.log('SELECT TAB', index);
+        tabBarCtrl.selectTabAtIndex(index);
+      };
       
-      // Set a default item icon if none is provided
-      attrs.$observe('icon', function(value) {
-        scope.icon = value || 'icon-default';
-      });
+      tabBarCtrl.addTab(scope);
     },
-    template: '<li class="tab-item">' + 
-        '<a href="#" ng-click="selectTabItem($index)">' + 
+    template: '<li class="tab-item" ng-class="{active:active}">' + 
+        '<a href="#" ng-click="selectTab(tabIndex)">' + 
           '<i class="{{icon}}"></i>' +
           '{{text}}' +
         '</a></li>'
diff --git a/ext/angular/test/ionicTabBar.unit.js b/ext/angular/test/ionicTabBar.unit.js
index c6d327c07f..96766c0318 100644
--- a/ext/angular/test/ionicTabBar.unit.js
+++ b/ext/angular/test/ionicTabBar.unit.js
@@ -68,14 +68,11 @@ describe('Tab Item directive', function() {
   beforeEach(inject(function($compile, $rootScope, $controller) {
     compile = $compile;
     scope = $rootScope;
+    //ctrl = $controller('TabBarCtrl', { $scope: scope, $element: null });
 
-    scope.tabs = [
-      { text: 'Home', icon: 'icon-home' },
-      { text: 'Fun', icon: 'icon-fun' },
-      { text: 'Beer', icon: 'icon-beer' },
-    ];
-
-    element = compile('<tab-bar><tabs><tab-item></tab-item></tabs></tab-bar>')(scope);
+    element = compile('<tab-bar><tabs>' +
+      '<tab-item active="true" text="Item" icon="icon-default"></tab-item>' + 
+      '</tabs></tab-bar>')(scope);
     scope.$digest();
   }));
   
@@ -88,6 +85,10 @@ describe('Tab Item directive', function() {
   });
 
   it('Click sets correct tab index', function() {
-    expect(element.find('i').hasClass('icon-default')).toEqual(true);
+    var a = element.find('a:eq(2)');
+    //spyOn(a, 'click');
+    spyOn(scope, 'selectTab');
+    a.click();
+    expect(scope.selectTab).toHaveBeenCalled();
   });
 })
diff --git a/ext/angular/test/tabs.html b/ext/angular/test/tabs.html
new file mode 100644
index 0000000000..52e0a111f1
--- /dev/null
+++ b/ext/angular/test/tabs.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="/dist/ionic.css">
+    <script src="/vendor/angular/1.2.0rc1/angular-1.2.0rc1.min.js"></script>
+    <script src="/ext/angular/src/ionicContent.js"></script>
+    <script src="/ext/angular/src/ionicTabBar.js"></script>
+  </head>
+  <body ng-app="ionic.ui.tabbar">
+    <tab-bar>
+      <tabs>
+        <tab-item active="true" text="Cats" icon="icon-default" />
+        <tab-item active="true" text="Cats" icon="icon-default" />
+        <tab-item active="true" text="Cats" icon="icon-default" />
+      </tabs>
+    </tab-bar>
+  </body>
+</html>
