ng-message does not seem to work

Question

I have a piece of code on which angularjs ng-message doesnot seem to work.

Here is a JSfiddle

    <div ng-app="app" ng-controller="myctrl">
      <form name="myform" novalidate>
        error: {{myform.definition.$error}}
      <textarea ng-blur="handleBlur(myform)" 
                name="definition" 
                ng-model="$ctrl.definition"
                ng-blur="$ctrl.handleBlur(myform)">
      </textarea>
      <div ng-messages="myform.definition.$error">
        <div ng-message="validationError">
          Please enter a value for this field.
        </div>
      </div>
  </form>
</div>

controller:

angular.module('app', []).controller('myctrl', function($scope) {
   $scope.someval = true;
   $scope.handleBlur = function(form) {
    form.definition.$error.validationError = false;
    $scope.someval = !$scope.someval
    form.definition.$error['validationError'] = $scope.someval;
  }
})

Answer 1

From the docs, https://docs.angularjs.org/api/ngMessages#dynamic-messaging

Feel free to use other structural directives such as ng-if and ng-switch to further control what messages are active and when. Be careful, if you place ng-message on the same element as these structural directives, AngularJS may not be able to determine if a message is active or not. Therefore it is best to place the ng-message on a child element of the structural directive.

From:

  <div ng-messages="myform.definition.$error">
    <div ng-message="validationError">
      Please enter a value for this field.
    </div>
  </div>

To:

  <div ng-messages="myform.definition.$error">
    <div ng-if="showRequiredError">
      <div ng-message="validationError">
        Please enter a value for this field.
      </div>
    </div>
  </div>