fix memory leak, style updates, add test for order with async templats

Author: Narretz

src/ngMessages/messages.js

@@ -410,6 +410,13 @@ angular.module('ngMessages', [])
 
          $scope.$watchCollection($attrs.ngMessages || $attrs['for'], ctrl.render);
 
+         // If the element is destroyed, proactively destroy all the currently visible messages
+         $element.on('$destroy', function() {
+           forEach(messages, function(item) {
+             item.message.detach();
+           });
+         })
+
          this.reRender = function() {
            if (!renderLater) {
              renderLater = true;
@@ -670,8 +677,8 @@ function ngMessageDirectiveFactory() {
                 // when we are destroying the node later.
                 var $$attachId = currentElement.$$attachId = ngMessagesCtrl.getAttachId();
 
-                // in the event that the parent element is destroyed
-                // by any other structural directive then it's time
+                // in the event that the element or a parent element is destroyed
+                // by another structural directive then it's time
                 // to deregister the message from the controller
                 currentElement.on('$destroy', function() {
                   if (currentElement && currentElement.$$attachId === $$attachId) {

test/ngMessages/messagesSpec.js

@@ -412,7 +412,8 @@ describe('ngMessages', function() {
   }));
 
 
-  it('should not crash when the messages are transcluded, the first message is visible, and ngMessages is removed by ngIf', function() {
+  it('should not crash or leak memory when the messages are transcluded, the first message is' +
+    'visible, and ngMessages is removed by ngIf', function() {
 
     module(function($compileProvider) {
       $compileProvider.directive('messageWrap', function() {
@@ -444,14 +445,6 @@ describe('ngMessages', function() {
       expect(messageChildren(element).length).toBe(1);
       expect(trim(element.text())).toEqual('Fill in the text field.');
 
-      $rootScope.$apply(function() {
-        $rootScope.col.required = true;
-        $rootScope.col.extra = false;
-      });
-
-      expect(messageChildren(element).length).toBe(1);
-      expect(trim(element.text())).toEqual('Fill in the text field.');
-
       $rootScope.$apply('show = false');
 
       expect(messageChildren(element).length).toBe(0);
@@ -864,4 +857,43 @@ describe('ngMessages', function() {
       expect(s(element.text())).toEqual("YYYZZZX");
     }));
   });
+
+  it('should sustain the order when messages are included by a template with an async template', function() {
+    module(function($compileProvider) {
+      $compileProvider.directive('inclusor', function() {
+        return {
+          templateUrl: 'include.html'
+        };
+      });
+    });
+
+    inject(function($compile, $rootScope, $templateCache) {
+      var html;
+      $templateCache.put('include.html', '<div ng-message="a">A</div>' +
+                                     '<div ng-message="b">B</div>');
+
+      html = '<div ng-messages-multiple ng-messages="items"><div inclusor>' +
+        '</div><div ng-message="c">C</div><div ng-message="d">D</div></div>';
+      $rootScope.items = {};
+
+      $rootScope.$apply(function() {
+        $rootScope.items.b = true;
+        $rootScope.items.d = true;
+      });
+
+      element = $compile(html)($rootScope);
+      $rootScope.$digest();
+
+      expect(element.text().trim()).toBe('BD');
+
+      $rootScope.$apply(function() {
+        $rootScope.items.a = true;
+        $rootScope.items.c = true;
+      });
+
+      expect(element.text().trim()).toBe('ABCD');
+    });
+
+  });
+
 });