Form Validation and disabled button

Question

PLUNKER LINK

In above problem i have three radio buttons which let the user pay balance,minimum amount and other
amount.When user clicks on third radio button it opens up a div with input where user can enter their
amount and this field has some validation. And it followed up with some validation on next fieldset. I want to disable the submit button until the form is valid. But even if I choose balance or minimum amount payment options in radio button, the submit button remains disabled (waiting for form to be valid. Probably looking for validation, which is on third option). How can i avoid this ?

HTML

  <fieldset  class="form-group clearfix">
     <legend class="">Fieldset Title</legend>
        <ul class="vList">
            <li>
             <input type="radio" class="" name="balancePayment" id="payBalance"  ng-model="pay"     
                     value="balanceAmount" />
              <label class="" for="payBalance"> Balance:$130 </label>
            </li>
            <li>
              <input type="radio" class="form__radio" name="balancePayment" id="payMinimum"  ng-model="pay" 
                     value="minimumAmount"/>
              <label class="" for="payMinimum"> Minimum Amount:$4 </label>
            </li>
            <li>
              <input type="radio" class="" name="balancePayment" id="payOther" ng-model="pay" 
                 value="otherAmount"/>
              <label class="form__radioLabel" for="payOther"> Pay Different Amount </label>
            </li>
      </ul>
          <div class="otherpayment" ng-show ="pay=='otherAmount'" ng-class="{
                            'has-error':  myform.otherAmountpay.$invalid && myform.otherAmountpay.$dirty,
                            'has-success':myform.otherAmountpay.$valid}">
                <span class="help-block" ng-show="myform.otherAmountpay.$error.required &&  
                      myform.otherAmountpay.$dirty">Please enter your payment</span>
                <input  id="Tel1" name="otherAmountpay" ng-model="otherAmountpay" 
                       class="form-control" type="number" required=""/>
          </div>
  </fieldset>

Answer 1

It is because the otherAmountpay field is still invalid as it has been marked as required, even though not displayed angular will still validate it. So you need to make the "required" constraint conditional on your textbox based on when you need to validate it (only when "other pay" is selected). You can use ng-required. i.e ng-required="pay=='otherAmount'", set required field only when the option other amount is selected.

<input  id="Tel1" name="otherAmountpay" ng-model="otherAmountpay" 
                       class="form-control" type="number" ng-required="pay=='otherAmount'"/>

Plnkr