Fixed #158 - tab bar styles not set

dist/js/ionic-angular.js

@@ -25611,11 +25611,24 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function($scope, $element, $attr) {
+        var tabs = $element[0].querySelector('.tabs');
 
         $scope.tabsType = $attr.tabsType || 'tabs-positive';
         $scope.tabsStyle = $attr.tabsStyle;
         $scope.animation = $attr.animation;
 
+        $attr.$observe('tabsStyle', function(val) {
+          if(tabs) {
+            angular.element(tabs).addClass($attr.tabsStyle);
+          }
+        });
+
+        $attr.$observe('tabsType', function(val) {
+          if(tabs) {
+            angular.element(tabs).addClass($attr.tabsType);
+          }
+        });
+
         $scope.$watch('activeAnimation', function(value) {
           //$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse');
           $element.addClass($scope.activeAnimation);
@@ -25683,7 +25696,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     template: '<div class="tabs">' + 
       '<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' + 
     '</div>',
-    link: function($scope, $element, $attr) {
+    link: function($scope, $element, $attr, tabsCtrl) {
       $element.addClass($scope.tabsType);
       $element.addClass($scope.tabsStyle);
     }

js/ext/angular/src/directive/ionicTabBar.js

@@ -54,11 +54,24 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function($scope, $element, $attr) {
+        var tabs = $element[0].querySelector('.tabs');
 
         $scope.tabsType = $attr.tabsType || 'tabs-positive';
         $scope.tabsStyle = $attr.tabsStyle;
         $scope.animation = $attr.animation;
 
+        $attr.$observe('tabsStyle', function(val) {
+          if(tabs) {
+            angular.element(tabs).addClass($attr.tabsStyle);
+          }
+        });
+
+        $attr.$observe('tabsType', function(val) {
+          if(tabs) {
+            angular.element(tabs).addClass($attr.tabsType);
+          }
+        });
+
         $scope.$watch('activeAnimation', function(value) {
           //$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse');
           $element.addClass($scope.activeAnimation);
@@ -126,7 +139,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     template: '<div class="tabs">' + 
       '<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' + 
     '</div>',
-    link: function($scope, $element, $attr) {
+    link: function($scope, $element, $attr, tabsCtrl) {
       $element.addClass($scope.tabsType);
       $element.addClass($scope.tabsStyle);
     }

js/ext/angular/test/directive/ionicTabBar.unit.js

@@ -113,6 +113,17 @@ describe('Tabs directive', function() {
     scope.$digest();
     expect(element.find('a').length).toBe(2);
   });
+
+  it('Sets style on child tabs', function() {
+    element = compile('<tabs tabs-style="tabs-positive" tabs-type="tabs-icon-bottom">' + 
+      '<tab active="true" title="Item" icon="icon-default"></tab>' + 
+      '<tab active="true" title="Item" icon="icon-default"></tab>' + 
+    '</tabs>')(scope);
+    scope.$digest();
+    var tabs = element[0].querySelector('.tabs');
+    expect(angular.element(tabs).hasClass('tabs-positive')).toEqual(true);
+    expect(angular.element(tabs).hasClass('tabs-icon-bottom')).toEqual(true);
+  });
 });
 
 describe('Tab Item directive', function() {

js/ext/angular/test/tabs.html

@@ -43,6 +43,8 @@
         text-decoration: line-through;
       }
     </style>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
   </head>
   <body ng-controller="RootCtrl">
     <tabs
@@ -129,8 +131,6 @@
       </div>
     </script>
 
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
       angular.module('tabsTest', ['ionic'])