<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>