title: How to update a form controller in AngularJS after changing input constraints
body: <p>I have been recently working on dynamically changing constraints on input fields on a form. The aim was to make a back-end-driven form, whereas all fields and their constraints are being sent to us by a server. Whilst I managed to get the constraints to be added/removed as we please by creating a simple directive, it seems like a form controller is not picking up these changes, and so the form is always $valid. Have a look at <a href="http://jsfiddle.net/eL3ce3oq/" rel="nofollow">this jsfiddle</a>, here is the directive:</p>
  
  <pre><code>myApp.directive('uiConstraints', [function(){
  
  function applyConstraints(element, newVal, oldVal){
      //remove old constraints
      if(oldVal !== undefined &amp;&amp; oldVal !== null){
          for (var i = 0; i &lt; oldVal.length; i++) {
              element.removeAttr(oldVal[i].key);
          }
      }
  
      //apply new constraints
      if(newVal !== undefined &amp;&amp; newVal !== null){
          for (var i = 0; i &lt; newVal.length; i++) {
              var constraint = newVal[i];
              element.attr(constraint.key, constraint.value);
          }
      }
  }
  
  function link(scope, element, attrs){
      scope.$watch(attrs.uiConstraints, function(newVal, oldVal){
          applyConstraints(element, newVal, oldVal);
      });
  }
  
  return {
      restrict : 'A',
      link : link
  };
  
  }]);
  </code></pre>
  
  <p>The required behavior is so it works like on the <a href="http://plnkr.co/edit/A2fMYPnEAmTynaDnoERO?p=preview" rel="nofollow">official angularjs plunker</a>. However, it seems the FormController is being created before the directive populates constraints on the input fields, and updating these constraints doesn't update the corresponding values in the FormController.  </p>
  
  <p>Does any1 know if I can force the FormController to pickup the changes to constraints made by the directive? And if so, how? I have no idea where to even start... Thanks.  </p>
  
  <p>-- EDIT --<br>
  I couldn't get plunker to work (show to others my latest changes) so here is jsfiddle of what I have: <a href="http://jsfiddle.net/eL3ce3oq/" rel="nofollow">latest</a><br>
  To more in detail describe the issue:</p>
  
  <ol>
  <li>go to the jsfiddle described</li>
  <li>if you remove the initial value from the textbox, it will become red (invalid), however the controller won't pick that up and will still show:</li>
  </ol>
  
  <blockquote>
    <p>myform.$valid = true<br>
    myform.myfield.$valid = true  </p>
  </blockquote>
  
  <p>-- EDIT --<br>
  The bounty description doesn't recognize Stack Overflow formatting (like 2 spaces for new line etc) so here it is in more readable form:  </p>
  
  <blockquote>
    <p>Since this is still unsolved and interesting question I decided to start a bounty.<br>
    <strong>The requirements are:</strong><br>
    - works on ancient AngularJS(1.0.3) and newer (if it can't be done on 1.0.3 but someone did it on newer version of angular I will award bounty)<br>
    - initially a field has no constraints on it (is not required, max and min not set etc)<br>
    - at any time constraints for the field can change (it can become required, or a pattern for the value is set etc), as well as any existing constraints can be removed<br>
    - all constraints are stored in a controller in an object or array<br>
    - FormController picks up the changes, so that any $scope.FormName.$valid is being changed appropriately when constraints
    on any fields in that form change  </p>
    
    <p>A good starting point is my <strong><a href="http://jsfiddle.net/eL3ce3oq/" rel="nofollow">jsfiddle</a></strong>.<br>
    <strong>Thanks for your time and good luck!</strong></p>
  </blockquote>