In order for Angular to track changes on form inputs, they need to be defined as ng-model
properties on the scope.
So, your demo will work if you add the appropriate ng-model
attributes:
<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
<h1>Test {{name}}!!</h1>
<form name="loginForm" action="login" novalidate>
<input type="email" name="email" ng-model="email" placeholder="email" required/>
<input type="password" name="password" ng-model="passowrd" placeholder="password" required/>
<button type="submit" ng-disabled="loginForm.$invalid">Login</button>
<p ng-show="loginForm.$invalid">Please fix your form.</p>
<p ng-show="loginForm.email.$invalid">Please fix your email.</p>
<p ng-show="loginForm.password.$invalid">Please fix your password.</p>
</form>
</div>
<script>
var testapp = angular.module('testapp', []);
var testCtrl = function($scope) {
$scope.name = 'validation';
};
</script>
Here is a working fiddle.