AngularJS - form validation, v 1.4.8

This is my first time using AngularJS, and the form validation is making me question my sanity. You would think this would be the easy part, but no matter how many ways I've tried Googling, the only thing that works is if I set a flag inside my controller's submit if the form is invalid to set the error class. I've looked at similar problems here, but none of them helped, so please do not simply dismiss this as a potential duplicate. Everything else has been a fail.

In the example mark up below I have reduced my form down to just one element. Here is what I have observed:

1. Using only $error.required does work. The ng-class { 'has-error' :registerForm.firstName.$error.required} does outline the text box with the bootstrap has-ertror class, but this is on form load, which I do not want.

2. The <p> element with the error message will exhibit the same behavior, so I know that the message exists and is not malfored. It will also display if I only use $error.required. But as soon as I add && registerForm.$submitted ( or $isdirty or !notpristine ) the message will not display on form submit. There are no errors (have developers tools open in chrome) and will post to the web API with no problem and return ok 200 or 400 if I send bad params.

3. I can write validation code inside my controller, checking if the field has a value and setting a flag on $scope such as $scope.firstNameIsRequired and that will work fine setting ng-show="$scope.firstNameIsRequired", but that will remove testability. So the problem definitely has to be with how I am adding this in the markup. But after a weekend spent googling I am at my wits end. The only other thing different is that I am using a span on a click element to submit the form instead of an input = submit, but the registerForm.$valid function is setting the correct value. Do I somehow need to trigger the form validation in that ng-click directive?

I am using angular.js v 1.4.8. I do have angular ui which has it's own validate, but that shouldn't interfere with the basic validation.

Here is the simplified markup:

<form name="registerForm" class="form-group form-group-sm" 
    ng-controller="userAccountController" novalidate>
<div class="form-group" 
        ng-class="{ 'has-error' : registerForm.firstName.$error.required }">
    <div><label>First Name</label> </div>
    <input type="text" class="form-control" id="firstName" name="firstName" value="" 
        ng-model="firstName" placeholder="First Name" maxlength="100" required=""/>
    <p ng-show="registerForm.firstName.$error.required && registerForm.$submitted" 
        class="alert alert-danger">First Name is required</p>
</div>  
    <div>
        <span class="btn btn-default" 
                ng-click="submit(registerForm.$valid)">Register</span>
    </div>

My controller code is

angular.module( "Application" ).controller( "userAccountController", [
"$scope", "userAccountService", function ( $scope, userAccountService)
{
    $scope.hasErrors = false;
    $scope.errorMessages = "";
    $scope.emailExists = true;
    $scope.clearErrors = function (){
        $scope.hasErrors = false;
    }

    $scope.onSuccess = function ( response ) {
        alert( "succeeded" );
    }

    $scope.submit = function (isValid) {
        if ($scope.registerForm.$invalid)
            return;
        alert("isvalid");
        $scope.clearErrors();
         var userProfile = $scope.createUser();
         userAccountService.registerUser(userProfile, $scope.onSuccess, $scope.onError);
    }

    $scope.createUser = function ()   {
        return {
            FirstName: $scope.firstName, LastName: $scope.lastName, Email: $scope.email,
            Password: $scope.password, SendAlerts: $scope.sendAlerts
        };
    };
}
]);

Any help will be appreciated. I probably just need a second set of eyes here because I have been dealing with this on and off since late Friday.