fix(tabs): use interpolation for type attribute

Closes angular-ui#1409

BREAKING CHANGE: Use interpolation for type attribute.

  Before:

  <tabset type="'pills'" ...></tabset >
  or
  <tabset type="navtype" ...></tabset>

  After:

  <tabset type="pills" ...></tabset>
  or
  <tabset type="{{navtype}}" ...></tabset>

Author: bekos

src/tabs/docs/demo.html

@@ -24,7 +24,7 @@
 
   <hr />
 
-  <tabset vertical="true" type="navType">
+  <tabset vertical="true" type="pills">
     <tab heading="Vertical 1">Vertical content 1</tab>
     <tab heading="Vertical 2">Vertical content 2</tab>
   </tabset>

src/tabs/docs/demo.js

@@ -9,6 +9,4 @@ var TabsDemoCtrl = function ($scope) {
       alert("You've selected the alert tab!");
     });
   };
-
-  $scope.navType = 'pills';
 };

src/tabs/tabs.js

@@ -9,9 +9,12 @@
 
 angular.module('ui.bootstrap.tabs', [])
 
-.controller('TabsetController', ['$scope', function TabsetCtrl($scope) {
+.controller('TabsetController', ['$scope', '$attrs', function TabsetCtrl($scope, $attrs) {
   var ctrl = this,
       tabs = ctrl.tabs = $scope.tabs = [];
+  
+  $scope.vertical = angular.isDefined($attrs.vertical) ? $scope.$parent.$eval($attrs.vertical) : false;
+  $scope.justified = angular.isDefined($attrs.justified) ? $scope.$parent.$eval($attrs.justified) : false;
 
   ctrl.select = function(tab) {
     angular.forEach(tabs, function(tab) {
@@ -74,14 +77,11 @@ angular.module('ui.bootstrap.tabs', [])
     restrict: 'EA',
     transclude: true,
     replace: true,
-    scope: {},
+    scope: {
+      type: '@'
+    },
     controller: 'TabsetController',
-    templateUrl: 'template/tabs/tabset.html',
-    link: function(scope, element, attrs) {
-      scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
-      scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false;
-      scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs';
-    }
+    templateUrl: 'template/tabs/tabset.html'
   };
 })
 

src/tabs/test/tabs.spec.js

@@ -353,7 +353,7 @@ describe('tabs', function() {
     beforeEach(inject(function($controller, $rootScope) {
       scope = $rootScope;
       //instantiate the controller stand-alone, without the directive
-      ctrl = $controller('TabsetController', {$scope: scope, $element: null});
+      ctrl = $controller('TabsetController', {$scope: scope, $attrs: {}, $element: null});
     }));
 
 
@@ -564,7 +564,7 @@ describe('tabs', function() {
       scope = $rootScope.$new();
       scope.navType = 'pills';
 
-      elm = $compile('<tabset type="navType"></tabset>')(scope);
+      elm = $compile('<tabset type="{{navType}}"></tabset>')(scope);
       scope.$apply();
     }));
 

template/tabs/tabset.html

@@ -1,6 +1,6 @@
 
 <div class="tabbable">
-  <ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
+  <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
   <div class="tab-content">
     <div class="tab-pane" 
          ng-repeat="tab in tabs"