fix(ngInclude): only run anchorScroll after animation is done

We need to wait until animations have added the content to the document before
trying to `autoscroll` to anchors that may have been inserted.

Fixes angular#4723

Author: petebacondarwin

src/ng/directive/ngInclude.js

@@ -178,6 +178,13 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile'
         };
 
         scope.$watch($sce.parseAsResourceUrl(srcExp), function ngIncludeWatchAction(src) {
+          var afterAnimation = function() {
+
+              if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
+                $anchorScroll();
+              }
+
+          };
           var thisChangeId = ++changeCounter;
 
           if (src) {
@@ -192,13 +199,8 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile'
                 currentElement = clone;
 
                 currentElement.html(response);
-                $animate.enter(currentElement, null, $element);
+                $animate.enter(currentElement, null, $element, afterAnimation);
                 $compile(currentElement.contents())(currentScope);
-
-                if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
-                  $anchorScroll();
-                }
-
                 currentScope.$emit('$includeContentLoaded');
                 scope.$eval(onloadExp);
               });

test/ng/directive/ngIncludeSpec.js

@@ -322,22 +322,36 @@ describe('ngInclude', function() {
       };
     }
 
+    function spyOnAnimateEnter() {
+      return function($animate) {
+        spyOn($animate, 'enter').andCallThrough();
+      };
+    }
+
+    function runEnterAnimation($animate) {
+      if ($animate.enter.mostRecentCall) {
+        $animate.enter.mostRecentCall.args[3]();
+      }
+    }
+
     function compileAndLink(tpl) {
       return function($compile, $rootScope) {
         element = $compile(tpl)($rootScope);
       };
     }
 
     function changeTplAndValueTo(template, value) {
-      return function($rootScope, $browser) {
+      return function($rootScope, $browser, $animate) {
         $rootScope.$apply(function() {
           $rootScope.tpl = template;
           $rootScope.value = value;
         });
+        runEnterAnimation($animate);
       };
     }
 
     beforeEach(module(spyOnAnchorScroll()));
+    beforeEach(inject(spyOnAnimateEnter()));
     beforeEach(inject(
         putIntoCache('template.html', 'CONTENT'),
         putIntoCache('another.html', 'CONTENT')));
@@ -374,6 +388,16 @@ describe('ngInclude', function() {
         changeTplAndValueTo('template.html', null), function() {
       expect(autoScrollSpy).not.toHaveBeenCalled();
     }));
+
+    it('should only call $anchorScroll after the "enter" animation completes', inject(
+        compileAndLink('<div><ng:include src="tpl" autoscroll></ng:include></div>'),
+        function($rootScope, $animate) {
+          $rootScope.$apply("tpl = 'template.html'");
+          expect($animate.enter).toHaveBeenCalledOnce();
+          expect(autoScrollSpy).not.toHaveBeenCalled();
+          runEnterAnimation($animate);
+          expect(autoScrollSpy).toHaveBeenCalledOnce();
+    }));
   });
 });