Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br />
<div ng-app ng-controller="MyCtrl" class='container'>
<fieldset>
<legend>Two Group</legend>
<input type="text"
ng-model="model.First"
ng-required="!model.Last"
class='form-control'/>
<br/>
<input type="text"
ng-model="model.Last"
ng-required="!model.First"
class='form-control'/>
</fieldset>
<legend>Three Group</legend>
<input type="text"
ng-model="fields.one"
ng-required="!(fields.two || fields.three)"
class='form-control' />
<br/>
<input type="text"
ng-model="fields.two"
ng-required="!(fields.one || fields.three)"
class='form-control' />
<br/>
<input type="text"
ng-model="fields.three"
ng-required="!(fields.one|| fields.two)"
class='form-control' />
</fieldset>
</div>
CSS
.ng-invalid-required{
border-left: 5px solid #990000;
}
.ng-valid-required{
border-left: 5px solid #009900;
}
legend {
width:inherit;
padding:0 10px;
left and right */
border: 2px solid #333;
}
JavaScript
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
}