I need the icon to the left of the input in my HTML form to change based on whether the user selects male or female. However, I am facing an issue where when switching from nothing to female, the icon does not update immediately (even though the ng-change function is triggered and works properly). The class only updates once the switch happens again.
<span class="input-group-addon"><i class="fa fa-male fa-lg fa-fw" ng-class="genderIcon"></i></span>
<select id="gender" name="gender" class="form-control input-lg" ng-model="form.gender" ng-change="switchGender()">
<option value="" selected="selected">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
Below is the switchGender function:
$scope.switchGender = function() {
$scope.genderIcon = ($scope.form.gender == 'Male') ? 'fa-male' : 'fa-female';
console.log($scope.genderIcon);
}
Even though the correct class is logged in the console, it does not reflect immediately in the view. I am confused as to why this delay occurs despite having the right icon variable?