Form Error Reporting in Angular

template.html

<ng-form name="shoeData">
  <div class="container-fluid">
    <div class="form-group col-sm-3 col-md-3 col-lg-3"
         ng-class="{ 'has-error': shoeData.shoeName.$touched && shoeData.shoeName.$invalid }">
      <label for="shoe-name" class="control-label">
        Name: <span class="text-danger">*</span>
      </label>
      <input id="shoe-name"
             type="text"
             autocomplete="off"
             name="shoeName"
             class="form-control"
             ng-model="shoeCtrl.shoe.name"
             ng-maxlength="100"
             maxlength="100"
             required
             auto-focus
             placeholder="Shoe Name"/>
      <div class="my-messages"
           ng-messages="shoeData.shoeName.$error"
           ng-if="shoeData.shoeName.$touched">
        <div class="some-message" ng-message="required">The shoe name is required</div>
      </div>
    </div>
  </div>
</ng-form>