Angular Forms with Directives

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div ng-app="app">
    <div ng-controller="ApplicationCtrl">
        <form name="signup" id="frmSignup" novalidate>
            <ks:email name="email" data-form="signup" model="user.email" label="Email address" data-required></ks:email> 
            <ks:password name="password" data-form="signup" model="user.password" label="Choose a password"></ks:password>                
            <input type="submit" value="Create" />
            <div>
                {{user | json}}
            </div>
        </form>
            <script type="text/ng-template" id="ksEmail.html">
                <div class="field">
                    <label ng-bind="label"></label>
                    <input type="email" name="{{name}}" ng-model="model" placeholder="So we can contact you" ng-required="isRequired()"/> 
                    <span ng-show="form[name].$valid && form[name].$touched">&#10004</span> 
                    <span ng-show="form[name].$error.email && form[name].$touched">&#10006</span>
                </div>                
            </script>
            <script type="text/ng-template" id="ksPassword.html">
                <div class="field">
                    <label ng-bind="label"></label>
                    <input type="{{getType()}}" ng-model="model" name="{{name}}" minlength="8" placeholder="At least 8 characters long" required /> 
                    <span ng-show="form[name].$valid && form[name].$touched">&#10004</span> 
                    <span ng-show="form[name].$error.minlength && form[name].$touched">Password must be at least 8 characters long</span> <br /> 
                    <label> <input type="checkbox" ng-model="hidePass"> Hide password </label>
                </div>
            </script>
    </div>
</div>

<script>
    
    var app = angular.module("app", []);

   ...

CSS

div.field {
    padding: 4px;
    font-family: sans-serif;
}

label[ng-bind] { display: block; font-weight: bold; margin-bottom: 5px;}

input[type=text], input[type=email], input[type=password] {
    display: inline-block;
    padding: 6px;
}