ngular is automatically adding ‘ng-invalid’ class on ‘required’ fields

Since the inputs are empty and therefore invalid when instantiated, Angular correctly adds the ng-invalid class.

A CSS rule you might try:

input.ng-dirty.ng-invalid {
  color: red
}

Which basically states when the field has had something entered into it at some point since the page loaded and wasn’t reset to pristine by $scope.formName.setPristine(true) and something wasn’t yet entered and it’s invalid then the text turns red.

Other useful classes for Angular forms (see input for future reference )

ng-valid-maxlength – when ng-maxlength passes
ng-valid-minlength – when ng-minlength passes
ng-valid-pattern – when ng-pattern passes
ng-dirty – when the form has had something entered since the form loaded
ng-pristine – when the form input has had nothing inserted since loaded (or it was reset via setPristine(true) on the form)
ng-invalid – when any validation fails (required, minlength, custom ones, etc)

Likewise there is also ng-invalid-<name> for all these patterns and any custom ones created.