<!DOCTYPE html>
<html lang="en" data-ng-app="MyApp">

<head>
  <meta charset="UTF-8">
  <title>AngularJS - Dependent field validation with Bootstrap</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <link href="style.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://raw.githubusercontent.com/angular-ui/ui-validate/master/dist/validate.js"></script>
  <script src="./controller.js"></script>

</head>

<body data-ng-controller="MyController as myCtrl">
  <form name="myForm" novalidate="novalidate">
    <div class="form-container well well-lg">

      <label for="labelLink1" class="control-label">Owning Organisational Unit</label>
      <div class="dropdown">
        <button id="labelLink1" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <span data-ng-bind="myCtrl.val1"></span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li data-ng-repeat="val in myCtrl.validVal1Vals">
            <a data-ng-click="myCtrl.updateVal1(val)" data-ng-bind="val"></a>
          </li>
        </ul>
      </div>
      <input type="hidden" data-ng-model-options="{allowInvalid:true}" data-ng-model="myCtrl.val1" data-ui-validate="{boom:'myCtrl.val1 % 1 === 0'}"/>
    </div>
    <div class="form-container well well-lg">
      <label for="labelLink2">Value 2</label>
      <input id="labelLink2" type="number" data-ng-model-options="{allowInvalid:true}" data-ng-model="myCtrl.val2" data-ui-validate-async="{ten:'myCtrl.asyncValidators.ten(myCtrl.val1, $value)', fifteen:'myCtrl.asyncValidators.fifteen(myCtrl.val1, $value)'}"
      data-ui-validate-watch=" 'myCtrl.val1' " />
    </div>
  </form>

  <p>The form is invalid if the sum of the two numbers adds up to 10 or 15</p>

  <div data-ng-class="{stop:myForm.$invalid, getReady:myForm.$pending, go:myForm.$valid}">
    <span>FORM IS</span>
    <span data-ng-show="myForm.$valid">VALID</span>
    <span data-ng-show="myForm.$invalid">INVALID</span>
    <span data-ng-show="myForm.$pending">PENDING - awaiting ($http or $q) promise to be resolved or rejected</span>
  </div>

  <div class="specific-alerts">
    <div ng-if="myForm.$error.ten" class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
      <strong><span class="glyphicon glyphicon-warning-sign"></span> Warning</strong> You got a 10 error!
    </div>
    <div ng-if="myForm.$error.fifteen" class="alert alert-danger alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
      <strong><span class="glyphicon glyphicon-exclamation-sign"></span> Oopsie</strong> Its the dreaded FIFTEEN.
    </div>
    <div ng-if="myForm.$error.boom" class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
      <strong><span class="glyphicon glyphicon-warning-sign"></span> Nooo</strong> ... I said don't click me!
    </div>
  </div>

</body>

</html>

.stop {
  color: #CC0000;
}

.getReady {
  color: #C58917;
}

.go {
  color: green;
}

body {
  padding: 2em;
}

.specific-alerts {
  margin-top:1em;
}
AngularJS - Dependent field validation with Bootstrap

This plunk shows, in AngularJS, how to validate:
* A bootstrap dropdown
* Dependent fields (using ui-validate)

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

    myApp.controller('MyController', ['$q', '$timeout', function($q, $timeout) {
      var self = this;
      this.validVal1Vals = [3, 5, 7, "Don't click me"];
      this.val1 = 3;
      this.val2 = 3;

      this.updateVal1 = function(val) {
        self.val1 = val;
      };

      function testInvalidValue(val1, val2, invalidValue) {

        var def = $q.defer();
        $timeout(function() {
          if (val1 + val2 === invalidValue) {
            def.reject();
          } else {
            def.resolve();
          }
        }, 1000);
        return def.promise;
      }

      this.asyncValidators = {
        ten: function(val1, val2) {
          return testInvalidValue(val1, val2, 10);
        },
        fifteen: function(val1, val2) {
          return testInvalidValue(val1, val2, 15);
        }
      };

    }]);