Toggle mandatory based on empty or nonempty of the first input box. The user may enter a value and also clear the value. 

* If nonempty -> Other control are **required**
* If empty -> Other control are **not required**

As soon as the user enters a value in the first input box, the required controls should be highlighted with a red colored border. If the user clears the value or the input box is empty those red border should not be shown.

Find this [PLUNKER](https://plnkr.co/edit/cyijfkBpYGXm2sDjOTot?p=preview)

**If you can do this only with Angular properties that would be great.**

**HTML**

```
  <div ng-controller="TimeController as vm">
    <form name="vm.timeForm" novalidate>
      <div class="form-group">
        <label>If you enter any value here below two fields becomes mandatory, 
        If I am empty below fields are not mandatory. </label>
        <input type="number" name="firstfield" class="form-control" 
        ng-model="vm.firstfield" required>
      </div>

      <div class="form-group">
        <label>Please select</label>
        <select class="form-control" ng-model="vm.selectedOption" ng-change="vm.updateMinMax()" ng-required="vm.firstfield">
          <option value="hours">HOURS</option>
          <option value="minutes">MINUTES</option>
          <option value="seconds">SECONDS</option>
        </select>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : vm.timeForm.desiredRPO.$invalid && !vm.timeForm.desiredRPO.$pristine }">
        <label>Desired Time</label>
        <input type="number" name="desiredRPO" class="form-control" ng-model="vm.desiredRPO" ng-min="vm.minValue" ng-max="vm.maxValue" ng-required="vm.firstfield">
        <p ng-show="vm.timeForm.desiredRPO.$invalid" class="help-block">Please enter value between {{vm.minValue}} and {{vm.maxValue}}</p>
      </div>
    </form>
  </div>

```