Looking for some assistance with a coding problem I'm having. I keep running into an error when trying to make a selected item in an ng-repeat list highlight. The CSS style is only applied on the second click, not the first. Additionally, I need to ensure that the selected tab remains highlighted even after refreshing the page.
Below is the code snippet:
$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
};
<ul class="left-menu">
<li ng-repeat="navigation in navigations"
ng-click="setSelected(navigation.value.NavID)"
ng-class="{selected: navigation.value.NavID === idSelectedVote}">
<a href="{{navigation.value.RelativePath}}">
<i ng-class="navigation.value.IconPath"
class="icon" aria-hidden="true"></i>
{{navigation.value.ComponentTitle }}
</a>
</li>
</ul>
.selected {
background-color: grey;
}