fix(tabs): delays disconnect until after the digest is finished

Closes #1048.

src/components/tabs/js/tabItemController.js

@@ -5,7 +5,7 @@
 angular.module('material.components.tabs')
   .controller('$mdTab', TabItemController);
 
-function TabItemController($scope, $element, $attrs, $compile, $animate, $mdUtil, $parse) {
+function TabItemController($scope, $element, $attrs, $compile, $animate, $mdUtil, $parse, $timeout) {
   var self = this;
 
   // Properties
@@ -29,14 +29,18 @@ function TabItemController($scope, $element, $attrs, $compile, $animate, $mdUtil
    * Add the tab's content to the DOM container area in the tabs,
    * @param contentArea the contentArea to add the content of the tab to
    */
-  function onAdd(contentArea) {
+  function onAdd(contentArea, shouldDisconnectScope) {
     if (self.content.length) {
       self.contentContainer.append(self.content);
       self.contentScope = $scope.$parent.$new();
       contentArea.append(self.contentContainer);
 
       $compile(self.contentContainer)(self.contentScope);
-      $mdUtil.disconnectScope(self.contentScope);
+      if (shouldDisconnectScope === true) {
+        $timeout(function () {
+          $mdUtil.disconnectScope(self.contentScope);
+        }, 0, false);
+      }
     }
   }
 

src/components/tabs/js/tabsController.js

@@ -53,13 +53,15 @@ function MdTabsController($scope, $element, $mdUtil, $$rAF) {
   // Returns a method to remove the tab from the list.
   function add(tab, index) {
     tabsList.add(tab, index);
-    tab.onAdd(self.contentArea);
 
     // Select the new tab if we don't have a selectedIndex, or if the
     // selectedIndex we've been waiting for is this tab
     if ($scope.selectedIndex === -1 || !angular.isNumber($scope.selectedIndex) || 
         $scope.selectedIndex === self.indexOf(tab)) {
+      tab.onAdd(self.contentArea, false);
       self.select(tab);
+    } else {
+      tab.onAdd(self.contentArea, true);
     }
 
     $scope.$broadcast('$mdTabsChanged');

src/components/tabs/tabs.spec.js

@@ -116,21 +116,22 @@ describe('<md-tabs>', function() {
       expect(tabItems.eq(0)).toBeActiveTab();
     }));
 
-    it('the active tab\'s content should always be connected', function() {
+    it('the active tab\'s content should always be connected', inject(function($timeout) {
       var tabs = setup('<md-tabs>' +
                        '<md-tab label="label1!">content1!</md-tab>' +
                        '<md-tab label="label2!">content2!</md-tab>' +
                        '</md-tabs>');
       var tabItems = tabs.find('md-tab');
       var contents = angular.element(tabs[0].querySelectorAll('.md-tab-content'));
 
+      $timeout.flush();
       expect(contents.eq(0).scope().$$disconnected).toBeFalsy();
       expect(contents.eq(1).scope().$$disconnected).toBeTruthy();
 
       tabItems.eq(1).triggerHandler('click');
       expect(contents.eq(0).scope().$$disconnected).toBeTruthy();
       expect(contents.eq(1).scope().$$disconnected).toBeFalsy();
-    });
+    }));
 
     it('should bind to selected', function() {
       var tabs = setup('<md-tabs md-selected="current">' +