feat(tabs): adds support for md-autoselect

Author: Robert Messerle

src/components/tabs/demoDynamicTabs/index.html

@@ -1,6 +1,6 @@
 <div ng-controller="AppCtrl" class="sample" layout="column">
   <md-content class="md-padding">
-    <md-tabs md-selected="selectedIndex" md-border-bottom>
+    <md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect>
       <md-tab ng-repeat="tab in tabs"
               ng-disabled="tab.disabled"
               label="{{tab.title}}">

src/components/tabs/js/tabsController.js

@@ -11,7 +11,8 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
       locked    = false,
       elements  = getElements(),
       queue     = [],
-      destroyed = false;
+      destroyed = false,
+      loaded    = false;
 
   ctrl.scope = $scope;
   ctrl.parent = $scope.$parent;
@@ -51,8 +52,11 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
     $scope.$watch('$mdTabsCtrl.hasContent', handleHasContent);
     angular.element($window).on('resize', handleWindowResize);
     angular.element(elements.paging).on('DOMSubtreeModified', ctrl.updateInkBarStyles);
-    $timeout(updateHeightFromContent, 0, false);
-    $timeout(adjustOffset);
+    $timeout(function () {
+      updateHeightFromContent();
+      adjustOffset();
+      loaded = true;
+    });
     $scope.$on('$destroy', cleanup);
   }
 
@@ -88,6 +92,7 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
     ctrl.lastSelectedIndex = oldValue;
     ctrl.updateInkBarStyles();
     updateHeightFromContent();
+    adjustOffset();
     $scope.$broadcast('$mdTabsChanged');
     ctrl.tabs[oldValue] && ctrl.tabs[oldValue].scope.deselect();
     ctrl.tabs[newValue] && ctrl.tabs[newValue].scope.select();
@@ -208,6 +213,8 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
     }
     processQueue();
     updateHasContent();
+    //-- if autoselect is enabled, select the newly added tab
+    if (loaded && $scope.autoselect) $timeout(function () { select(ctrl.tabs.indexOf(tab)); });
     return tab;
   }
 

src/components/tabs/js/tabsDirective.js

@@ -61,6 +61,7 @@
  * @param {boolean=} md-no-pagination When enabled, pagination will remain off
  * @param {boolean=} md-swipe-content When enabled, swipe gestures will be enabled for the content area to jump between tabs
  * @param {boolean=} md-no-disconnect If your tab content has background tasks (ie. event listeners), you will want to include this to prevent the scope from being disconnected
+ * @param {boolean=} md-autoselect When present, any tabs added after the initial load will be automatically selected
  *
  * @usage
  * <hljs lang="html">
@@ -96,7 +97,8 @@ function MdTabs ($mdTheming, $mdUtil, $compile) {
       selectedIndex: '=?mdSelected',
       stretchTabs:   '@?mdStretchTabs',
       swipeContent:  '=?mdSwipeContent',
-      noDisconnect:  '=?mdNoDisconnect'
+      noDisconnect:  '=?mdNoDisconnect',
+      autoselect:    '=?mdAutoselect'
     },
     template: function (element, attr) {
       attr["$mdTabsTemplate"] = element.html();