fix(tabs): make tab contents be correctly connected to parent (angular-ui#524)

* Make tab contents be compiled into outer scope after being appended to
tab-pane elements.

Author: ajoslin

src/tabs/tabs.js

@@ -17,6 +17,11 @@ angular.module('ui.bootstrap.tabs', [])
 
 .controller('TabsetController', ['$scope', '$element', 
 function TabsetCtrl($scope, $element) {
+
+  //Expose the outer scope for tab content compiling, so it can compile
+  //on outer scope like it should
+  this.$outerScope = $scope.$parent;
+   
   var ctrl = this,
     tabs = ctrl.tabs = $scope.tabs = [];
 
@@ -280,15 +285,17 @@ function($parse, $http, $templateCache, $compile) {
   };
 }])
 
-.directive('tabContentTransclude', ['$parse', function($parse) {
+.directive('tabContentTransclude', ['$compile', '$parse', function($compile, $parse) {
   return {
     restrict: 'A',
     require: '^tabset',
     link: function(scope, elm, attrs, tabsetCtrl) {
+      var outerScope = tabsetCtrl.$outerScope;
       scope.$watch($parse(attrs.tabContentTransclude), function(tab) {
         elm.html('');
         if (tab) {
           elm.append(tab.contentElement);
+          $compile(tab.contentElement)(outerScope);
         }
       });
     }

src/tabs/test/tabsSpec.js

@@ -475,4 +475,18 @@ describe('tabs', function() {
     });
   });
 
+  //https://github.com/angular-ui/bootstrap/issues/524
+  describe('child compilation', function() {
+
+    var elm;
+    beforeEach(inject(function($compile, $rootScope) {
+      elm = $compile('<tabset><tab><div></div></tab></tabset></div>')($rootScope.$new());
+      $rootScope.$apply();
+    }));
+
+    it('should hookup the tab\'s children to the tab with $compile', function() {
+      var tabChild = $('.tab-pane', elm).children().first();
+      expect(tabChild.inheritedData('$tabsetController')).toBeTruthy();
+    });
+  });
 });