Angular Validation - Not showing message

Question

Basically I have angularjs validation ready to go on the example below.

<input type="text" maxlength="60" class="form-control" id="inputFirstName" name="firstName" placeholder="" ng-model="formData.firstName" required="">
    <div ng-show="admission-form.$submitted || admission-form.firstName.$touched">
        <span ng-show="admission-form.firstName.$error.required">First Name is required<br></span>
    </div>

So I can get the css to highlight the field when invalid but I still am not getting the message to show. I see that from chrome's dev tools that both ng-invalid-required and ng-touched are on the firstName input. What am I missing?

Some other notes: I do have the form named admission-form but it is on another html file and directed to it from angular-ui-router. All the form pages are nested under the same controller.

Let me know if there is any other information that would be helpful. I am still fairly new to angular.

********EDIT********

As requested the state config. The page goes index.html nests form.html which nests each page of the form. The one for this input in the personalInformation.html page.

angular.module('admissionsApp', ['ui.router', 'ui.mask', 'ui.bootstrap'])

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
    // route to show our basic form (/form)
    .state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: 'HomeController'
    })
    .state('form', {
        url: '/form',
        templateUrl: 'form.html',
        controller: 'FormController'
    })
    .state('form.personalInfo', {
        url: '/personalInfo',
        templateUrl: 'personalInformation.html'
    })

Answer 1

Looking at the AngularJS documentation

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

What it means is that when you add a name attribute on a <form> element in AngularJS (e.g. <form name="myForm">) it creates a form object on the $scope, so it's like you would do sth like $scope.myForm = ... in your controller.

When you put <form name="admission-form"> in your template, Angular tried to create a $scope.admission-form = ... property which, as an JavaScript expression doesn't make sense, so it just failed miserably and didn't create anything.

And AngularJS being AngularJS, when it encounters something weird in a template it did it silently, with no errors in the ...