gmittica/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Lesson</title>
<style id="jsbin-css">
.container {
  margin-top:45px;
}
</style>
</head>
<body ng-app="myApp">

  <div class="container" ng-controller="myCtrl">

    <form name="myForm" class="form" ng-submit="sendForm()" novalidate >

     <div class="form-group">
       <input type="text" validator1 name="title" ng-model="form.title" required="required" class="form-control" placeholder="Write a title" >
     </div>


      <div class="form-group">
        <button type="submit" class="btn btn-info" >Save</button>
     </div>

      <div class="well" >
        <span ng-show="myForm.title.$error.validator1">Title must contain "academy"</span>
      </div>

    </form>

    <div class="well">
      {{ form | json }}
    </div>

  </div>

<script id="jsbin-javascript">
angular.module("myApp", [])

.controller("myCtrl", ['$scope', function($scope) {
  $scope.form = { };

  $scope.sendForm = function() {
    // do something with $scope.form
  }
}])
.directive('validator1', function() {

  return {
    require: 'ngModel',
    link: function(scope, el, attrs, ctrl) {
      ctrl.$validators.validator1 = function(modelValue, viewValue) {

        if(ctrl.$isEmpty(modelValue)) {
          return true;
        }

        if(viewValue.search("academy") > -1) {
          return true;
        }

        return false;
      }
    }
  }

})
;
</script>


<script id="jsbin-source-css" type="text/css">.container {
  margin-top:45px;
}

</script>

<script id="jsbin-source-javascript" type="text/javascript">angular.module("myApp", [])

.controller("myCtrl", ['$scope', function($scope) {
  $scope.form = { };

  $scope.sendForm = function() {
    // do something with $scope.form
  }
}])
.directive('validator1', function() {

  return {
    require: 'ngModel',
    link: function(scope, el, attrs, ctrl) {
      ctrl.$validators.validator1 = function(modelValue, viewValue) {

        if(ctrl.$isEmpty(modelValue)) {
          return true;
        }

        if(viewValue.search("academy") > -1) {
          return true;
        }

        return false;
      }
    }
  }

})
;</script></body>
</html>

## jsbin.tebozuh.css
.container {
  margin-top:45px;
}

## jsbin.tebozuh.js
angular.module("myApp", [])

.controller("myCtrl", ['$scope', function($scope) {
  $scope.form = { };

  $scope.sendForm = function() {
    // do something with $scope.form
  }
}])
.directive('validator1', function() {

  return {
    require: 'ngModel',
    link: function(scope, el, attrs, ctrl) {
      ctrl.$validators.validator1 = function(modelValue, viewValue) {

        if(ctrl.$isEmpty(modelValue)) {
          return true;
        }

        if(viewValue.search("academy") > -1) {
          return true;
        }

        return false;
      }
    }
  }

})
;
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Lesson</title>
	<style id="jsbin-css">
	.container {
	margin-top:45px;
	}
	</style>
	</head>
	<body ng-app="myApp">

	<div class="container" ng-controller="myCtrl">

	<form name="myForm" class="form" ng-submit="sendForm()" novalidate >

	<div class="form-group">
	<input type="text" validator1 name="title" ng-model="form.title" required="required" class="form-control" placeholder="Write a title" >
	</div>


	<div class="form-group">
	<button type="submit" class="btn btn-info" >Save</button>
	</div>

	<div class="well" >
	<span ng-show="myForm.title.$error.validator1">Title must contain "academy"</span>
	</div>

	</form>

	<div class="well">
	{{ form \| json }}
	</div>

	</div>

	<script id="jsbin-javascript">
	angular.module("myApp", [])

	.controller("myCtrl", ['$scope', function($scope) {
	$scope.form = { };

	$scope.sendForm = function() {
	// do something with $scope.form
	}
	}])
	.directive('validator1', function() {

	return {
	require: 'ngModel',
	link: function(scope, el, attrs, ctrl) {
	ctrl.$validators.validator1 = function(modelValue, viewValue) {

	if(ctrl.$isEmpty(modelValue)) {
	return true;
	}

	if(viewValue.search("academy") > -1) {
	return true;
	}

	return false;
	}
	}
	}

	})
	;
	</script>


	<script id="jsbin-source-css" type="text/css">.container {
	margin-top:45px;
	}

	</script>

	<script id="jsbin-source-javascript" type="text/javascript">angular.module("myApp", [])

	.controller("myCtrl", ['$scope', function($scope) {
	$scope.form = { };

	$scope.sendForm = function() {
	// do something with $scope.form
	}
	}])
	.directive('validator1', function() {

	return {
	require: 'ngModel',
	link: function(scope, el, attrs, ctrl) {
	ctrl.$validators.validator1 = function(modelValue, viewValue) {

	if(ctrl.$isEmpty(modelValue)) {
	return true;
	}

	if(viewValue.search("academy") > -1) {
	return true;
	}

	return false;
	}
	}
	}

	})
	;</script></body>
	</html>