Validation in AngularJS

I am new to AngularJS. I am trying to implement some validation. As a test, I'm looking at a basic login screen. The code for that login screen looks like the following:

<style type="text/css">
  input.ng-invalid.ng-dirty { background-color: red; color:white; }
</style>

<form novalidate name="loginForm" role="form">
  <div ng-show="(isDataValid==false)" class="ng-hide">
    Please correct the errors on the page.
  </div>

  <div>
    <label for="username">Username</label>
    <input type="text" id="username" placeholder="Username" ng-model="username"
           required>
  </div>

  <div>
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="Password" ng-model="password"
           required>
  </div>

  <button type="submit" ng-click="formSubmit(loginForm);">Submit</button>
</form>

<script type="text/javascript">
  function loginController($scope) {
    $scope.isDataValid = null;

    $scope.formSubmit = function(f) {
      $scope.isDataValid = f.$valid;
      if (f.$invalid) {
        return;
      }

      return false;
    };
  }
</script>

When the page loads up, I want it to be in a clean looking state (this works). I want field level validation after a user begins working with a field (this works). I want field level validation when a user clicks 'submit'. This partially works.

My problem is, if I press 'submit' without using the fields at all, the css classes on the fields do not get updated. I believe the reason why is because the fields aren't 'dirty'. However, I'm not sure how to fix this and 1) meet my first requirement and 2) Adhere to the idea of keeping AngularJS controlls away from the DOM.

Does anyone know how I can do this?

Thank you so much!