<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.0.0-rc1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="test">
<!--Note that the form creates its own controller instance-->
<form name="testForm" class="form form-horizontal">
<label><input type="checkbox" ng-model="model.isWPPOnly"> isWPPOnly</label>
<!-- element name CANNOT contain a dot, since it's used as a form controller property -->
<input type="text" ng-required="!model.isWPPOnly" name="date_grades" ng-model="date.grades" />
<h3>Result</h3>
<pre>{{date | json}}</pre>
<pre>{{model | json}}</pre>
</form>
</body>
</html>
// Code goes here
angular.module('app', []).controller('test', function($scope){
// Create object to store bindings via references
// In javascript simple types (Number, String, Boolean) are passed via value
// and complex ones ([], {}) via reference (1)
$scope.model = {}
$scope.model.isWPPOnly = true;
$scope.date = {};
$scope.date.grades = 'foo';
// (1) I know, I've oversimplified it a little bit :)
})
/* Styles go here */
.error, .ng-invalid{
border: 1px solid red;
box-shadow: 0 0 10px red;
}
form{
padding: 10px;
}