Chapter 9: Trimming your watch list with lazy binding

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <form name="fanForm">
        <input name="myTeam" 
               type="text" 
               ng-model="user.team" 
               validate-favorite-team />
        <div ng-if="fanForm.myTeam.$error.favoriteSamTeam">
            Sam, your favorite team cannot be the Packers
        </div>
    </form>
</div>

JavaScript

angular.module('myApp', [])
.directive('validateFavoriteTeam', function() {
    return {
        require : 'ngModel',
        link : function(scope, element, attrs, ngModel) {
            // define custom validator "favoriteTeam"
            ngModel.$validators.favoriteSamTeam = function(team) {
                // check string inequivalency 
                // a false return value indicates an error
                return team !== "Packers";
            }; 
        }
    };
});