fix(tabs): use interpolation for type attribute

Closes #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

@@ -82,13 +82,14 @@ 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';
     }
   };
 })

src/tabs/test/tabs.spec.js

@@ -398,7 +398,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});
     }));
 
 
@@ -609,7 +609,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"