fix(ngMessages): create new scope for ngMessage, clean it up correctly

Previously, ngMessage elements used the same scope as ngMessages. When ngMessage
has interpolation in the textContent, then removing the message would not remove
the watcher from the scope - it would only be removed when the whole ngMessages
element was removed.

This commit changes the ngMessage transclude function to create a new child scope
instead, which can be destroyed safely when the message element is removed and
the message is detached

Fixes #14307

Author: Narretz

src/ngMessages/messages.js

@@ -654,16 +654,17 @@ function ngMessageDirectiveFactory() {
           assignRecords(staticExp);
         }
 
-        var currentElement, messageCtrl;
+        var currentElement, currentScope, messageCtrl;
         ngMessagesCtrl.register(commentNode, messageCtrl = {
           test: function(name) {
             return contains(records, name);
           },
           attach: function() {
             if (!currentElement) {
-              $transclude(scope, function(elm) {
+              $transclude(function(elm, newScope) {
                 $animate.enter(elm, null, element);
                 currentElement = elm;
+                currentScope = newScope;
 
                 // Each time we attach this node to a message we get a new id that we can match
                 // when we are destroying the node later.
@@ -686,6 +687,8 @@ function ngMessageDirectiveFactory() {
               var elm = currentElement;
               currentElement = null;
               $animate.leave(elm);
+              currentScope && currentScope.$destroy();
+              currentScope = null;
             }
           }
         });

test/ngMessages/messagesSpec.js

@@ -1,6 +1,6 @@
 'use strict';
 
-describe('ngMessages', function() {
+fdescribe('ngMessages', function() {
   beforeEach(inject.strictDi());
   beforeEach(module('ngMessages'));
 
@@ -485,6 +485,51 @@ describe('ngMessages', function() {
     });
   });
 
+
+  it('should clean-up the ngMessage scope when a message is removed',
+    inject(function($compile, $rootScope) {
+      function countWatchers() {
+        var scope = $rootScope;
+        var watchers = 0;
+
+        while (scope) {
+          watchers += scope.$$watchers.length;
+          if (scope.$$childHead) {
+            scope = scope.$$childHead;
+          } else if (scope.$$nextSibling) {
+            scope = scope.$$nextSibling;
+          } else {
+            scope = null;
+          }
+        }
+
+        return watchers;
+      }
+
+      var html =
+          '<div ng-messages="items">' +
+            '<div ng-message="a">{{forA}}</div>' +
+          '</div>';
+
+      element = $compile(html)($rootScope);
+      $rootScope.$apply(function() {
+        $rootScope.forA = 'A';
+        $rootScope.items = {a: true};
+      });
+
+      expect(element.text()).toBe('A');
+      var watchers = countWatchers();
+
+      $rootScope.$apply('items.a = false');
+
+      expect(element.text()).toBe('');
+      // We don't know exactly how many watchers are on the scope, only that there should be
+      // one less now
+      expect(countWatchers()).toBe(watchers-1);
+    })
+  );
+
+
   describe('when including templates', function() {
     they('should work with a dynamic collection model which is managed by ngRepeat',
       {'<div ng-messages-include="...">': '<div ng-messages="item">' +