fix(tabs): fixes an issue with #6292

fixes an issue with 6292

#6292

Author: danbucholtz

js/angular/directive/tabNav.js

@@ -5,10 +5,10 @@ IonicModule
     replace: true,
     require: ['^ionTabs', '^ionTab'],
     template:
-    '<a ng-class="{\'has-badge\':badge, \'tab-hidden\':isHidden()}" ' +
+    '<a ng-class="{\'has-badge\':badge, \'tab-hidden\':isHidden(), \'tab-item-active\': isTabActive()}" ' +
       ' ng-disabled="disabled()" class="tab-item">' +
       '<span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>' +
-      '<i class="icon"></i>' +
+      '<i class="icon {{getIcon()}}" ng-if="getIcon()"></i>' +
       '<span class="tab-title" ng-bind-html="title"></span>' +
     '</a>',
     scope: {
@@ -57,35 +57,16 @@ IonicModule
         return tabsCtrl.selectedTab() === tabCtrl.$scope;
       };
 
-      $scope.$watch("icon", function() {
-        styleTab();
-      });
-
-      $scope.$watch("iconOff", function() {
-        styleTab();
-      });
-
-      $scope.$watch("iconOn", function() {
-        styleTab();
-      });
-
-      function styleTab() {
-        // check if tab if active
+      $scope.getIcon = function() {
         if ( tabsCtrl.selectedTab() === tabCtrl.$scope ) {
-          $element.addClass('tab-item-active');
-          $element.find('i').removeClass($scope.getIconOff());
-          $element.find('i').addClass($scope.getIconOn());
+          // active
+          return $scope.iconOn || $scope.icon;
         }
         else {
-          $element.removeClass('tab-item-active');
-          $element.find('i').removeClass($scope.getIconOn());
-          $element.find('i').addClass($scope.getIconOff());
+          // inactive
+          return $scope.iconOff || $scope.icon;
         }
-      }
-
-      $scope.$on("tabSelected", styleTab);
-
-      styleTab();
+      };
     }
   };
 }]);

test/html/tabs-starter.html

@@ -93,7 +93,7 @@ <h2>Welcome to Ionic</h2>
   <script id="templates/tabs.html" type="text/ng-template">
     <ion-tabs class="tabs-icon-top tabs-color-active-positive">
       <!-- Dashboard Tab -->
-      <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
+      <ion-tab title="Status" href="#/tab/dash">
         <ion-nav-view name="tab-dash"></ion-nav-view>
       </ion-tab>