title: AngularJS: revert form on modal cancel?
body: <p>I'm trying to use AngularJS 1.3.0's new  <code>$rollbackViewValue()</code> method in <a href="https://docs.angularjs.org/api/ng/type/ngModel.NgModelController" rel="nofollow noreferrer">ngModelController</a> to cancel changes to a form in a modal popup or persist them when I close the modal.  I'm using BootstrapUI for the <code>$modal</code> service.</p>
  <p>I think I'm on the right track, but there is something that isn't quite working properly:</p>
  <p>In my controller, I've got:</p>
  <pre><code>   $scope.updateCharge = function (charge) {
          var scope = $scope.$new();
          scope.charge = charge;
  
          var modalInstance = $modal.open({
              templateUrl: 'client/app/views/providers/charges/updateCharge.html',
              scope: scope
          });
  
          modalInstance.result.then(function () {
              scope.charge.$save({providerId: providerId, chargeId: charge.id});
          });
      };
  </code></pre>
  <p>In my template, I have the following:</p>
  <pre><code>&lt;form name=&quot;form&quot; novalidate ng-model-options=&quot;{updateOn: 'save',  debounce: {'save': 0 }}&quot; class=&quot;form-horizontal&quot; role=&quot;form&quot;&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;chargeName&quot;&gt;Name&lt;/label&gt;
  
              &lt;div class=&quot;col-sm-9&quot;&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; required ng-model=&quot;charge.code&quot; id=&quot;chargeName&quot;/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;button class=&quot;btn btn-primary&quot; ng-disabled=&quot;form.$invalid&quot; ng-click=&quot;form.$broadcast('save'); $close()&quot;&gt;Update&lt;/button&gt;
          &lt;button class=&quot;btn btn-warning&quot; ng-click=&quot;form.$rollbackViewValue(); $dismiss('cancel')&quot;&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  <p>Generally speaking, this seems to work.  When I click on cancel, my changes are reverted.  When I click on Update, the modal closes but I do not see my updates in the <code>scope.charge</code> object.</p>
  <p>I would have expected that my <code>scope.charge</code> object would be updated prior to the modal closing.</p>
  <p>Am I using the <code>ng-model-options</code> incorrectly?</p>
  <p>If I add a separate 'Apply' button that only does a <code>form.$broadcast('save')</code>, I see my scope object properly updated.  So I am presuming that my <code>$close()</code> is being called prior to the event being processed by the <code>ng-model-options</code>.  How can I avoid this race condition?</p>