Selected element color on AngularJS disappears

I need to prevent the color of the selected item from disappearing after clicking any other part of the page.


<div class="collapse navbar-collapse navbar-collapse-bottom-right navbar-collapse-default">
    <ul class="nav navbar-nav navbar-right navbar-bottom-right">
        <li class="menuitem" ng-repeat="item in menu"><a href="/#!/{{item.url}}">{{item.title}}</a>



$ = [{title: "Product", url: 'product'}, {title: 'About', url: 'about'}, {title: "Contact", url: 'contact'}, {title : "Registration", url: 'register'}, {name: "Login", url: 'login'}];

I add this code but it doesn't work

 App.controller('MainController', function ($scope, $rootScope) {  
 $scope.isActive = function(item) {
     return $scope.selected === item; };
         $ = [
                 title: 'Product',
                 url: 'product'
                 title: 'About',
                 url: 'about'
                 title: 'Contact',
                 url: 'contact'
                 title: 'Register',
                 url: 'register'
                 title: 'Login',
                 url: 'login'



unresolved problem


source to share

1 answer

ok, so this is how I created an element that is generated using ng-repeat to be "selected" as active.

I have installed the "active" ng class by following below.

Hope it helps

 <div class="panel-body" id="repeate">
                <div class="list-group" ng-show="Song.length > 0" ng-repeat="s in Song | orderBy: 'Date' :true | limitTo: 100">
                    <a href="#" class="list-group-item" ng-class="{active: isActive(s)}" ng-click="select(s)">{{s.SongName}}</a>


Js add

  $ = function(i) {
    $scope.selected = i;
    $scope.isActive = function(item) {
        return $scope.selected === item;




All Articles