fix(docs): fix animation for menu-toggle

References #6572, Fixes #6262, Fixes #6936, Closes #6937

docs/app/js/app.js

@@ -464,7 +464,7 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, $location, $rootScope, $http, $wind
   };
 })
 
-.directive('menuToggle', [ '$timeout', function($timeout) {
+.directive('menuToggle', [ '$timeout', '$mdUtil', function($timeout, $mdUtil) {
   return {
     scope: {
       section: '='
@@ -479,20 +479,21 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, $location, $rootScope, $http, $wind
       $scope.toggle = function() {
         controller.toggleOpen($scope.section);
       };
-      $scope.$watch(
+
+      $mdUtil.nextTick(function() {
+        $scope.$watch(
           function () {
             return controller.isOpen($scope.section);
           },
           function (open) {
             var $ul = $element.find('ul');
 
-            $timeout(function updateHeight() {
-              $timeout(function () {
-                $ul.css({ height: (open ? getTargetHeight() : 0) + 'px' });
-              }, 0, false);
+            var targetHeight = open ? getTargetHeight() : 0;
+            $timeout(function () {
+              $ul.css({height: targetHeight + 'px'});
             }, 0, false);
 
-            function getTargetHeight () {
+            function getTargetHeight() {
               var targetHeight;
               $ul.addClass('no-transition');
               $ul.css('height', '');
@@ -502,8 +503,8 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, $location, $rootScope, $http, $wind
               return targetHeight;
             }
           }
-      );
-
+        );
+      });
 
       var parentNode = $element[0].parentNode.parentNode.parentNode;
       if(parentNode.classList.contains('parent-list-item')) {