Prevent validation of hidden fields in angularJS/ionic

I have this form and I have used ng-hide to hide some fields when meeting certain requirements. I have used validation for all the fields ( When a field is kept empty, it'll validate and ask to be fill the field). The problem is when my fields get hidden, still it seems to be validating. So I cannot proceed my form. How can I solve this problem?

I've used ng-required to the fields I've hidden and set it to false when that field is not needed, but it does not seem to work.

This is part of the form that I'm referring to:

<div class="form-group" ng-class="{ 'has-error' :submitted && (myForm.scheduler.$pristine || myForm.scheduler.$invalid)}">
                                   <label class="labelColor"><h5><b>Payment Type *</b></h5></label>
                                   <select  type="select" class="textbox-n"  id="scheduler" ng-model="data.scheduler" ng-change="scheduleChange()"  ng-options="Scheduler.name for Scheduler in SchedulersArr" name="scheduler" required>

                                       <option id="default" value="" selected="selected">--Select--</option></select>
                                   <span class="help-inline" ng-show="submitted && (myForm.scheduler.$pristine || myForm.scheduler.$invalid)" >A Payment Type is required.</span>
                               </div>

                               <!-- Effective Date:-->
                               <div ng-hide = "hideFutureDate">
                                   <div class="form-group" ng-class="{ 'has-error' : myForm.effectiveDate.$invalid && myForm.effectiveDate.$dirty && submitted || (myForm.effectiveDate.$invalid && myForm.effectiveDate.$pristine) && submitted }">
                                       <label class="labelColor" ><h5><b>Effective Date*</b></h5></label><br>
                                       <input style="width:100%" class="item-input-wrapper" type="date"  id="effectiveDate" name="effectiveDate" ng-model="data.effectiveDate"
                                       placeholder="Effective Date" ng-required="!hideFutureDate" />
                                       &nbsp;
                                       <span class="help-inline" ng-show="submitted && myForm.startDate.$error.required"  >A Effective date is required.</span>
                                       <font color="red" >{{dateValidation}}</font>

                                   </div>
                               </div>


                               <!--From/To Dates -->
                               <div ng-hide = "hideRecurrent" >
                                   <div class="row" style="padding-left:15px">
                                       <div class="form-group" ng-class="{ 'has-error' : myForm.startDate.$invalid && myForm.startDate.$dirty && submitted || (myForm.startDate.$invalid && myForm.startDate.$pristine) && submitted }">
                                           <label class="labelColor" ><h5><b>From Date*</b></h5></label><br>
                                           <input style="width:100%" class="item-input-wrapper" type="date"  id="startDate" name="startDate" ng-model="data.startDate"
                                           placeholder="From Date" ng-required="!hideRecurrent" />
                                           &nbsp;
                                           <span class="help-inline" ng-show="submitted && myForm.startDate.$error.required"  >A Start date is required.</span>
                                           <font color="red" >{{dateValidation}}</font>

                                       </div>
                                       &nbsp;&nbsp;&nbsp;
                                       <div class="form-group" ng-class="{ 'has-error' : myForm.toDate.$invalid && myForm.toDate.$dirty && submitted || (myForm.toDate.$invalid && myForm.toDate.$pristine) && submitted }">
                                           <label class="labelColor" ><h5><b>To Date*</b></h5></label><br>
                                           <input style="width:100%" class="item-input-wrapper" type="date" id="toDate" name="toDate" ng-model="data.toDate"
                                           placeholder="To Date" ng-required="!hideRecurrent" />
                                           <span class="help-inline" ng-show="submitted && myForm.toDate.$error.required" >An End date is required.</span>
                                           <font color="red" >{{dateValidation}}</font>
                                       </div>

                                       &nbsp;
                                   </div>

JS part

 $scope.scheduleChange = function(){


                   if($scope.data.scheduler.name == 'Future Date'){

                   $scope.hideFutureDate = false;
                   $scope.hideRecurrent = true;

                   }
                   else if($scope.data.scheduler.name == 'Recurrent'){
                   $scope.hideFutureDate = true;
                   $scope.hideRecurrent = false;
                   }

I saw I can use ng-if to resolve this but not sure how.