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

@@ -21,7 +21,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,16 @@
 
 angular.module('ui.bootstrap.tabs', [])
 
-.controller('TabsetController', ['$scope', function TabsetCtrl($scope) {
+.constant('tabsConfig', {
+  type: 'tabs'
+})
+
+.controller('TabsetController', ['$scope', '$attrs', '$interpolate', 'tabsConfig', function TabsetCtrl($scope, $attrs, $interpolate, tabsConfig) {
   var ctrl = this,
       tabs = ctrl.tabs = $scope.tabs = [];
+  
+  $scope.vertical = angular.isDefined($attrs.vertical) ? $scope.$parent.$eval($attrs.vertical) : false;
+  $scope.type = angular.isDefined($attrs.type) ? $interpolate($attrs.type)($scope.$parent) : tabsConfig.type;
 
   ctrl.select = function(tab) {
     angular.forEach(tabs, function(tab) {
@@ -71,11 +78,7 @@ angular.module('ui.bootstrap.tabs', [])
     replace: true,
     scope: {},
     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.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});
     }));
 
 
@@ -551,7 +551,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();
     }));