title: AngularJS: disabling all form controls between submit and server response
body: <p>I have a dilemma about what is the best (and correct) approach if I want to disable form controls (or at least make them unavailable for user interaction) during a period of time when user clicks sort of "Save" or "Submit" button and data travelling over the wire. I don't want to use JQuery (which is evil!!!) and query all elements as array (by class or attribute marker)
  The ideas I had so far are:</p>
  
  <ul>
  <li>Mark all elements with <code>cm-form-control</code> custom directive which will subscribe for 2 notifications: "data-sent" and "data-processed". Then custom code is responsible for pushing second notification or resolve a promise.</li>
  <li>Use <code>promiseTracker</code> that (unfortunatelly!) enforces to produce extremely stupid code like <code>ng-show="loadingTracker.active()"</code>. Obviously not all elements have <code>ng-disabled</code> and I don't want to user <code>ng-hide/show</code> to avoid "dancing" buttons.</li>
  <li>Bite a bullet and still use JQuery</li>
  </ul>
  
  <p>Does any one have a better idea? Thanks in advance!</p>
  
  <p><strong>UPDATED:</strong> 
  The fieldset idea DOES work. Here is a simple fiddle for those who still want to do the same <a href="http://jsfiddle.net/YoMan78/pnQFQ/13/" rel="noreferrer">http://jsfiddle.net/YoMan78/pnQFQ/13/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
      &lt;ng-form ng-controller="myCtrl"&gt;
          Saving: {{isSaving}}
          &lt;fieldset ng-disabled="isSaving"&gt;
              &lt;input type="text" ng-model="btnVal"/&gt;
              &lt;input type="button" ng-model="btnVal" value="{{btnVal}}"/&gt;
              &lt;button ng-click="save()"&gt;Save Me Maybe&lt;/button&gt;
          &lt;/fieldset&gt;
      &lt;/ng-form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and JS:</p>
  
  <pre><code>var angModule = angular.module("myApp", []);
  
  angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {
      $scope.isSaving = undefined;
      $scope.btnVal = 'Yes';
      $scope.save = function()
      {
          $scope.isSaving = true;
          $timeout( function()
               {
                   $scope.isSaving = false;
                   alert( 'done');
               }, 10000);
      };
  });
  </code></pre>