ラジオボタンInternet Explorer Edgeで画像が正常に動作しない

Question

IE Edgeラジオボタンでは、ラベルテキスト（男性/女性）をクリックしたときにオン/オフになりますが、男性/女性に隣接する画像をクリックするとチェックされません。どこで他のブラウザでラジオボタンがチェックされる/私は画像とテキスト（男性/女性）をクリックするとチェックを外す。

HTML：

<div class="form-group clearfix"> 
<div class="pull-left formQuestions"><p>Which gender do you identify with?</p></div> 
<div class="pull-left individualAnswer"> 
<div class="clearfix"> 
<div class="pull-left optionOne"> 
<input type="radio" name="gender" id="male" class="input-hidden" ng-model="genderSelect" ng-value = "'male'" ng-change = "genderSelection(genderSelect)" required/> 
<label for="male" class="radioLabel"> 
<img class="radioPic" ng-src={{imgPathMale}} /> Male 
</label> 
</div> 
<div class="pull-left"> 
<input type="radio" name="gender" id="female" class="input-hidden" ng-model="genderSelect" ng-value = "'female'" ng-change = "genderSelection(genderSelect)" required/> 
<label for="female" class="radioLabel"> <img class="radioPic" ng-src={{imgPathFemale}} />Female       
</label> 
</div> 
</div> 
</div> 
</div> 

CSS：

.input-hidden{ 
visibility: hidden; 
position: absolute; 
} 

のJs：

$scope.genderSelection = function(gender){ 

    if(gender == 'male'){ 
    $scope.imgPathMale = "assets/images/form_radio_selected.png"; 
    $scope.imgPathFemale = "assets/images/form_radio_unselected.png"; 
    } 
    else{ 
    $scope.imgPathFemale = "assets/images/form_radio_selected.png"; 
    $scope.imgPathMale = "assets/images/form_radio_unselected.png"; 
    } 
} 

Answer 1

label{ 
    display:inline-block; 
} 
label img{ 
pointer-events: none; 
-moz-user-select: -moz-none; // to remove blue color highlight in which we 
    //get on clicking image in firefox. 
}