I am looking to customize the focus color of a select menu based on a model value.
For example, when I choose "Product Manager", the background color changes to blue upon focusing. However, I want to alter this background color dynamically depending on the value stored in $scope.model.webPageSkinColor.
$scope.model.webPageSkinColor = "#7A0834";
$scope.model.webPageSkinColor = "#fff";
$scope.assignedRoles = ["Product Manager", "Student", "Parent", "Engineer"];
<div class="col-sm-4">
<label class="control-label l_font field-name" for="acode">Select Role *</label>
<select class="form-control floating-select" ng-model="model.selectRole" name="selectrole" ng-change="getallassignedRoledetails(model.selectRole)" ng-options="item for item in assignedRoles" required style="width: 100%;" ng-style ="{'background': model.webPageSkin, 'color': model.webPageSkin1}">
<option value class selected disabled ng-if="!model.selectRole"></option>
</select>
</div>