AngularJS - Mensaje de validación de visualización dentro del componente

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-messages.js"></script>

<body ng-app="DemoApp">
  <form name="dummy">
    <bloglist></bloglist>
  </form>
</body>
<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>
<script type="text/ng-template" id="my.html">
  <div ng-form="directiveForm">
    <input type="text" name="first" ng-model="sample" required/>
    <pre>{{ directiveForm.first.$error | json }}</pre>
    <div ng-messages="directiveForm.first.$error" style="color:maroon" role="alert">
      <div ng-message="required">You did not enter a field</div>
    </div>
  </div>
</script>


<script>
  angular.module("DemoApp", ['ngMessages'])
    .component('bloglist', {
      templateUrl: 'my.html',
      controller: function($scope) {

      }
    });
</script>
SAMER SAEID