fix(ngModel): deregister from the form on scope not DOM destruction

Due to animations, DOM might get destroyed much later than scope and so the element $destroy event
might get fired outside of $digest, which causes changes to the validation model go unobserved
until the next digest. By deregistering on scope  event, the deregistration always happens
in $digest and the form validation model changes will be observed.

Closes #4226
Closes #4779

1 files changed, 15 insertions, 6 deletions

diff --git a/test/ng/directive/formSpec.js b/test/ng/directive/formSpec.js
index 53fd3d90..77beb2fd 100644
--- a/test/ng/directive/formSpec.js
+++ b/test/ng/directive/formSpec.js
@@ -36,18 +36,23 @@ describe('form', function() {
   });
 
 
-  it('should remove the widget when element removed', function() {
+  it('should remove form control references from the form when nested control is removed from the DOM', function() {
     doc = $compile(
       '<form name="myForm">' +
-        '<input type="text" name="alias" ng-model="value" store-model-ctrl/>' +
+        '<input ng-if="inputPresent" name="alias" ng-model="value" store-model-ctrl/>' +
       '</form>')(scope);
+    scope.inputPresent = true;
+    scope.$digest();
 
     var form = scope.myForm;
     control.$setValidity('required', false);
     expect(form.alias).toBe(control);
     expect(form.$error.required).toEqual([control]);
 
-    doc.find('input').remove();
+    // remove nested control
+    scope.inputPresent = false;
+    scope.$apply();
+
     expect(form.$error.required).toBe(false);
     expect(form.alias).toBeUndefined();
   });
@@ -362,14 +367,15 @@ describe('form', function() {
     });
 
 
-    it('should deregister a input when its removed from DOM', function() {
+    it('should deregister a input when it is removed from DOM', function() {
       doc = jqLite(
         '<form name="parent">' +
           '<div class="ng-form" name="child">' +
-            '<input ng:model="modelA" name="inputA" required>' +
+            '<input ng-if="inputPresent" ng-model="modelA" name="inputA" required>' +
           '</div>' +
         '</form>');
       $compile(doc)(scope);
+      scope.inputPresent = true;
       scope.$apply();
 
       var parent = scope.parent,
@@ -384,7 +390,10 @@ describe('form', function() {
       expect(doc.hasClass('ng-invalid-required')).toBe(true);
       expect(doc.find('div').hasClass('ng-invalid')).toBe(true);
       expect(doc.find('div').hasClass('ng-invalid-required')).toBe(true);
-      doc.find('input').remove(); //remove child
+
+      //remove child input
+      scope.inputPresent = false;
+      scope.$apply();
 
       expect(parent.$error.required).toBe(false);
       expect(child.$error.required).toBe(false);