I'm having trouble figuring out the correct code for a navigation sidebar in an angularJS app. The goal is for the active link to be highlighted with a background color when clicked. Currently, it does work but the highlight only shows up after clicking each link twice. What am I missing here? Any assistance would be highly appreciated.
javascript
$scope.addActiveClass = function ($index) {
$scope.addActiveClass = $index;
var checked = $('ul.sidebar2-nav li');
$(checked).on("click", "", function () {
$(this).addClass('active-label');
});
}
html
<nav id="program-editor-pullout" menustate="closed" >
<ul class="list-unstyled sidebar2-nav">
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
</label>
</div>
</li>
...
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: documents}" ui-sref-active="active" ui-sref=".document">Documents</a>
</label>
</div>
</li>
</ul>
</nav>
CSS
ul.sidebar2-nav li a.active {
color: #000;
cursor: pointer;
text-decoration: none;
}
ul.sidebar2-nav li.active-label {
background: whitesmoke;
}