Angular: Empty Fiddle

http://angularjs.org/

by smlombardi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://guxstaging.pbi.global.pvt/design_system/styles/design_system.css">
<div class="container" ng-controller="MyCtrl">
    <p>{{thanks}}</p>
    <br/>
    <br/>
    <form name="form" class="css-form" novalidate>
        
        <div class="form-group" ng-class="{'has-error' : (form.uEmail.$dirty &&	form.uEmail.$invalid) && !test}">
            <label>Email</label>
        
            <!-- USING NGBLUR and NGFOCUS -->
            <input class="form-control" type="email" ng-model="user.email" ng-model-options="{ updateOn: 'blur' }" name="uEmail" ng-focus="test=true" ng-blur="test=false" required/>
        <br />
        <div ng-show="(form.uEmail.$dirty && form.uEmail.$invalid) && !test">
            Invalid:	<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
        </div>
    </div>     
    <div class="form-group" ng-class="{'has-error' : (form.uEmailConfirm.$dirty &&	user.email != user.emailConfirm) && !test2}">
        <label>Confirm email</label>
        <input class="form-control" type="text" ng-model="user.emailConfirm" name="uEmailConfirm" ng-focus="test2=true" ng-blur="test2=false" required/>
        <br />
        <div ng-show="(form.uEmailConfirm.$dirty &&	user.email != user.emailConfirm) && !test2 ">Confirmation email doesn't match!</div>
        </div>
            <br>
            <pre>{{test}}</pre>
    </form>
</div>

JavaScript

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.thanks = 'Thanks for helping!';
}