fix($animate): make .pin() work with nested elements

Related angular#12617

Author: Narretz

src/ngAnimate/animateQueue.js

@@ -586,6 +586,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
             parentHost = parentElement.data(NG_ANIMATE_PIN_DATA);
             if (parentHost) {
               parentElement = parentHost;
+              rootElementDetected = true;
             }
           }
         }

test/ngAnimate/animateSpec.js

@@ -1432,20 +1432,22 @@ describe("animations", function() {
       jqLite($document[0].body).append(innerParent);
       innerParent.append($rootElement);
 
-      var element = jqLite('<div></div>');
-      jqLite($document[0].body).append(element);
+      var pinElement = jqLite('<div><p></p></div>');
+      jqLite($document[0].body).append(pinElement);
 
-      $animate.addClass(element, 'red');
+      var animateElement = pinElement.find('p');
+
+      $animate.addClass(animateElement, 'red');
       $rootScope.$digest();
       expect(capturedAnimation).toBeFalsy();
 
-      $animate.pin(element, $rootElement);
+      $animate.pin(pinElement, $rootElement);
 
-      $animate.addClass(element, 'blue');
+      $animate.addClass(animateElement, 'blue');
       $rootScope.$digest();
       expect(capturedAnimation).toBeTruthy();
 
-      dealoc(element);
+      dealoc(pinElement);
     }));
 
     it('should adhere to the disabled state of the hosted parent when an element is pinned',