AngularJS form validation ngMessages not working with multi-step form

I am using AngularJS 1.5, ui-router for state management and ngMessages for validation and ngMaterial for UI. I have one main view contained in myformView.html and I load inside it two states (firstPartView.html and secondPartView.html).

I followed this tutorial to create multi-step form.

myformView.html:

   <form name="vm.myForm" ng-submit="vm.submit()">

       <div data-ui-view></div>

   </form>

firstPartView.html:

  <md-input-container class="md-block" flex-gt-sm>
   <label>First name (required)</label>
   <input name="firstName" ng-model="vm.user.firstName" ng-pattern="/^[a-zA-Z0-9]*$/" required>
   <div ng-messages="vm.myForm.firstName.$error" ng-show="vm.myForm.firstName.$touched">
  div ng-message="required">Your first name is required!</div>
div ng-message="pattern">Your first name should only contains valid characters!</div>
 </div>

secondPartView.html:

<md-button type="submit" ng-disabled="vm.myForm.$invalid" class="md-primary md-raised">Sign up</md-button>
<md-button type="reset" ng-click="vm.resetForm()" class="md-primary">Reset</md-button>

State Handling:

 .state("registration", {
                      url: "/register",
                      templateUrl: "app/register/myformView.html",
                      controller: "myformController as vm"
                  })
                      .state("registration.first", {
                          url: "/first",
                          templateUrl: "app/register/firstPartView.html.html"
                      })
                      .state("register.second", {
                          url: "/second",
                          templateUrl: "app/register/secondPartView.html"
                      })

Now the validation is not applied correctly and I don't know if this is due to multi-step form or not? For example, if the user didn't input anything in the first name input, the submit button should be disabled due to

ng-disabled="vm.myForm.$invalid"

but this is not happening, any help?

Update:

I want to mention that the example I wrote above is too lightweight of an example for my real code, so I tried to do that below:

 <div data-ui-view></div>

 <pre ng-bind="vm.myForm | json"></pre>

Typing this generated too large of a JSON object for the first view.

THE OUTPUT:

First View:

    {
  "$error": {
    "required": [
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "firstName",
        "$options": null
      },
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "lastName",
        "$options": null
      },
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "email",
        "$options": null
      }
    ]
  },
  "$name": "vm.myForm",
  "$dirty": false,
  "$pristine": true,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "profilePicture": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "profilePicture",
    "$options": null
  },
  "firstName": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "firstName",
    "$options": null
  },
  "lastName": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "lastName",
    "$options": null
  },
  "email": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "email",
    "$options": null
  },
  "phoneNumber": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "phoneNumber",
    "$options": null
  }
}

Second View:

{
  "$error": {},
  "$name": "vm.myForm",
  "$dirty": false,
  "$pristine": true,
  "$valid": true,
  "$invalid": false,
  "$submitted": false
}