Showing ngMessages when form gets $dirty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-messages.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <form name="myForm" ng-submit="myForm.$valid && submit()" novalidate>
      <pre>Is it dirty yet? {{ myForm.$dirty }}</pre>
      <input type="email" name="email" ng-model="email" required/>
      
      
      <div ng-messages="myForm.email.$error" ng-if="myForm.$dirty || myForm.$submitted">
        <p ng-message="required">Please enter details in these field</p>
        <p ng-message="email">Please enter email</p>
      </div>
      <button type="submit">Save</button>
    </form>
  </div>
</div>

CSS

pre {
  white-space : pre-wrap;
  word-break: break-all;
  padding: 1rem;
  background: pink;
  border:1px solid gray;
}

JavaScript

angular.module('app', ['ngMessages'])
  .controller('ctrl', function($scope) {
  	$scope.email = '';
    $scope.submit = function() {
      console.log('submitting...');
      alert('success');
    }
  })