fix(tabs): resolves issue with nested tabs

Closes #4989

src/components/tabs/js/tabDirective.js

@@ -58,8 +58,8 @@ function MdTab () {
  require: '^?mdTabs',
  terminal: true,
  compile: function (element, attr) {
- var label = element.find('md-tab-label'),
- body = element.find('md-tab-body');
+ var label = firstChild(element, 'md-tab-label'),
+ body = firstChild(element, 'md-tab-body');
 
  if (label.length == 0) {
  label = angular.element('<md-tab-label></md-tab-label>');
@@ -88,8 +88,8 @@ function MdTab () {
  function postLink (scope, element, attr, ctrl) {
  if (!ctrl) return;
  var index = ctrl.getTabElementIndex(element),
- body = element.find('md-tab-body').eq(0).remove(),
- label = element.find('md-tab-label').eq(0).remove(),
+ body = firstChild(element, 'md-tab-body').remove(),
+ label = firstChild(element, 'md-tab-label').remove(),
  data = ctrl.insertTab({
  scope: scope,
  parent: scope.$parent,
@@ -114,6 +114,14 @@ function MdTab () {
  }
  );
  scope.$on('$destroy', function () { ctrl.removeTab(data); });
+ }
 
+ function firstChild (element, tagName) {
+ var children = element[0].children;
+ for (var i = 0, len = children.length; i < len; i++) {
+ var child = children[i];
+ if (child.tagName === tagName.toUpperCase()) return angular.element(child);
+ }
+ return angular.element();
  }
 }