How to use required in ng-show? - angularjs

Question

I have a select box in that few values which is based on the selection i need to show the labels of the textbox.
ex: if you selected
the SE means I need to show the Location2 and Reporting To label box.
If you are selecting MANAger means need to show only Location2 label text
box only. And if you are selecting ADM/cluster, any one from this means need to be display only Location alone.
Js file
$scope.ChangeRole = function(id){
roleid=$scope.Role;
if(id=="2"){
// alert(id);
$scope.showreport =true;
$scope.showreportlocation=true;
$scope.showlocation = false;
}else if(id=="3"){
$scope.showreportlocation = true;
$scope.showreport = false;
$scope.showlocation = false;
}else{
$scope.showreport = false;
$scope.showreportlocation = false;
$scope.showlocation = true;
}
}
HTML file
<div class="col-lg-6">
<div class="form-group">
<label>Role<span style="color:red">*</span></label>
<div class="input-group role">
<select placeholder="Role" ng-model="Role" class="form-control pull-right" ng-change="ChangeRole(Role);" required ng-init="selectedType()" id="selectType"" name="role" required>
<option value="0">Role</option>
<option value="1">ADM</option>
<option value="2">SE</option>
<option value="3">MANA</option>
<option value="4">ClUSTER</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group" ng-show="showlocation">
<label>Location<span style="color:red">*</span></label>
<div class="input-group location">
<select id="LocationInput" class="form-control" ng-model="LocationId" ng-options="location.Id as location.NameoftheLocation for location in locations" required>
<option id="OptionInput" value="">Location</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
<div class="col-md-6" ng-show="showreportlocation">
<div class="form-group">
<label>Location2<span style="color:red">*</span></label>
<div class="input-group site">
<select data-placeholder="Location" style="width: 100%;" ui-select2="select2Options" class="form-group" multiple ng-model="selectedTags" required>
<option ng-repeat="tag in tags" value="{{tag.Id}}">{{tag.NameoftheLocation}}</option>
</select>
<div class="input-group-addon">
<i class="fa fa-map"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-6" id="otherType" ng-show="showreport">
<div class="form-group">
<label>Reporting To<span style="color:red">*</span></label>
<div class="input-group">
<select class="form-control" id="reportingto" name="reportingto" ng-options="n.Id as n.Name for n in names" ng-model="ReportingTo" required>
<option value="">Reporting To</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
Here I have given the required option for all but which is not allowing me to save because required is present.
Using ng-show for particular selection I hide that label, but while saving html will check that field also, which is wrong please let me know that how to do.
Please some make the fiddle and let me know,

Answer 1

Use ng-required instead and only require it when it is shown.
I also tested Casey's suggestion of using ng-if instead of ng-show and that works as well. https://plnkr.co/edit/eeKvz5zRFeuLSF6fDbuy?p=preview