title: Reconcile Angular.js and Bootstrap form validation styling
body: <p>I am using Angular with Bootstrap. Here is the code for reference:</p>
  
  <pre><code>&lt;form name="newUserForm" ng-submit="add()" class="" novalidate&gt;
      &lt;input type="text" class="input" ng-model="newUser.uname" placeholder="Twitter" ng-pattern="/^@[A-Za-z0-9_]{1,15}$/" required&gt;&lt;/td&gt;
      &lt;button type="submit" ng-disabled="newUserForm.$invalid" class="btn btn-add btn-primary"&gt;Add&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Bootstrap has styles for invalid fields in the form of <code>input:invalid {.... }</code>; these kick in when the field is empty. Now I also have some pattern matching via Angular. This creates odd cases when ":invalid" is off, but ".ng-invalid" is on, which would require me to re-implement bootstrap CSS classes for the ".ng-invalid" class.</p>
  
  <p>I see two options, but having trouble with both</p>
  
  <ul>
  <li>Make Angular use some custom classname instead of "ng-valid" (I don't know how to do this).</li>
  <li>Disable html5 validation (I thought that that's what "novalidate" attribute in the form tag should do, but couldn't get it work for some reason).</li>
  </ul>
  
  <p>The Angular-Bootstrap directives out there don't cover styling.</p>