can't seem to display the content of ng-message for 'required'

Question

I don't know why but I can't seem to display the content of ng-message for 'required'. I'm new to this, so please excuse if I'm missing something obvious!!

If I try to display {{studentForm.fName.$error}} it says blank.

Btw this is my first question on stackoverflow :)

EDIT: Use form tag instead of md-form. Seems like md-form is not a valid tag. Additionally md-auto-hide="false" might me required under ng-messages tag. see : https://github.com/angular/material/issues/6767

<div layout="row">
  <div layout="column">
    <md-form ng-model="student" name="studentForm" flex="90%">
      <div layout="column" layout-padding>
        <md-input-container class="md-block" flex>
          <label for="firstName">firstName</label>
          <input type="text" ng-model="student.firstName" name="fName" placeholder="firstName" required></input>
        </md-input-container>
        <div ng-messages="studentForm.fName.$error" role="alert">
          <div ng-message="required">Required!!</div>
        </div>
        <md-datepicker name="DOB" ng-model="student.DOB" md-placeholder="Enter DOB" required valid>Enter DOB</md-datepicker>
        <div ng-messages="studentForm.DOB.$error" role="alert">
          <div ng-message="valid">The entered value is not a date!</div>
          <div ng-message="required">This date is required!</div>
        </div>
      </div>
      <md-button ng-click="submit()">Send your message</md-button>
    </md-form>
  </div>
</div>

Answer 1

Use form tag instead of md-form. Seems like md-form is not a valid tag. Additionally md-auto-hide="false" might me required under ng-messages tag. see : https://github.com/angular/material/issues/6767