feat(tab): allow strings for index

- Allows the use of strings for the tab index and active value
on the tabset.

Closes #5713
Closes #5827

src/tabs/docs/readme.md

@@ -45,7 +45,7 @@ AngularJS version of the tabs directive.
   Heading text.
 
 * `index` -
-  Tab index. Must be unique number.
+  Tab index. Must be unique number or string.
 
 * `select()`
   <small class="badge">$</small> -

src/tabs/tabs.js

@@ -28,7 +28,7 @@ angular.module('ui.bootstrap.tabs', [])
         selected.tab.active = true;
         ctrl.active = selected.index;
         oldIndex = selected.index;
-      } else if (!selected && angular.isNumber(oldIndex)) {
+      } else if (!selected && angular.isDefined(oldIndex)) {
         ctrl.active = null;
         oldIndex = null;
       }
@@ -52,7 +52,7 @@ angular.module('ui.bootstrap.tabs', [])
       return 0;
     });
 
-    if (tab.index === ctrl.active || !angular.isNumber(ctrl.active) && ctrl.tabs.length === 1) {
+    if (tab.index === ctrl.active || !angular.isDefined(ctrl.active) && ctrl.tabs.length === 1) {
       var newActiveIndex = findTabIndex(tab.index);
       ctrl.select(newActiveIndex);
     }
@@ -77,7 +77,7 @@ angular.module('ui.bootstrap.tabs', [])
   };
 
   $scope.$watch('tabset.active', function(val) {
-    if (angular.isNumber(val) && val !== oldIndex) {
+    if (angular.isDefined(val) && val !== oldIndex) {
       ctrl.select(findTabIndex(val));
     }
   });

src/tabs/test/tabs.spec.js

@@ -226,6 +226,41 @@ describe('tabs', function() {
     });
   });
 
+  describe('index as strings', function() {
+    beforeEach(inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.first = 'one';
+      scope.second = 'two';
+      scope.active = 'two';
+      elm = $compile([
+        '<uib-tabset active="active">',
+        '  <uib-tab index="first" heading="First Tab">',
+        '    first content',
+        '  </uib-tab>',
+        '  <uib-tab index="second" heading="Second Tab">',
+        '    second content',
+        '  </uib-tab>',
+        '</uib-tabset>'
+      ].join('\n'))(scope);
+      scope.$apply();
+      return elm;
+    }));
+
+    it('should set second tab active', function() {
+      expect(titles().eq(0)).not.toHaveClass('active');
+      expect(titles().eq(1)).toHaveClass('active');
+      expect(elm.controller('uibTabset').active).toBe('two');
+    });
+
+    it('should change active on click', function() {
+      expect(titles().eq(0)).not.toHaveClass('active');
+      titles().eq(0).find('> a').click();
+      expect(titles().eq(0)).toHaveClass('active');
+      expect(titles().eq(1)).not.toHaveClass('active');
+      expect(elm.controller('uibTabset').active).toBe('one');
+    });
+  });
+
   describe('tab callback order', function() {
     var execOrder;
     beforeEach(inject(function($compile, $rootScope) {