How to add and remove active class dynamically - angularjs

Question

In my webpage I have 2 languages English and Hindi. By default my page will be in English.
When I click on Hindi language I want to add active class to li which has hin id, and want to remove active class, which has eng id.
<li class="lang active" id="eng">
ENG
</li>
<li class="lang" id="hin">
HIN
</li>
Whenever I change language page gets refreshed. I need these changes once page is refreshed
myfunc = function(item) {
$scope.selectedlang = item;
var test = {value: item, displayValue: ''};
c.server.get(test).then(function() {
$window.location.reload();
})
I tried like this.
<li ng-class="{'active':selectedTab === 'eng'}" ng-click="selectedTab = 'eng'">
english
</li>
<li ng-class="{'active':selectedTab === 'hin'}" ng-click="selectedTab = 'hin'">
hindi
</li>
But these changes are not appearing after a page refresh.
How can I toggle classes using AngularJS?

Answer 1

try this
<li ng-class="{'active':location.hash == '#eng'}"><a href="#eng" >english</a>
</li>
<li ng-class="{'active':location.hash == '#hin'}"><a href="#hin" >hindi</a>
</li>
or
<li ng-class="{'active':location.hash == '#eng'}" id="eng">
ENG
</li>
<li ng-class="{'active':location.hash == '#hin'}" id="hin">
HIN
</li>
myfunc = function(item) {
location.hash = item;
$scope.selectedlang = item;
var test = {value: item, displayValue: ''};
c.server.get(test).then(function() {
$window.location.reload();
})

Answer 2

Store selectedTab value in local storage than refresh page. Once the page is reloaded get value from local storage and assign to selectedlang.
myfunc = function (item) {
$scope.selectedlang = item;
$window.localStorage.setItem('lang', item);
var test = {
value: item,
displayValue: ''
};
c.server.get(test).then(function () {
$window.location.reload();
});
}
// On page load
$scope.selectedlang = $window.localStorage.getItem('lang') || 'eng';

Answer 3

Here the problem is,Whenever page is refreshed then language is set to default language 'eng'.So try to store language value in localstorage and then apply ng-class.
<li ng-class="{'active':selectedTab == 'eng'}" ng-click="selectedTab('en')">
english
</li>
<li ng-class="{'active':selectedTab == 'hin'}" ng-click="selectedTab('hin')">
hindi
</li>
selectedTab= function(item) {
localStorage.setItem("selectedTab",item);
})
Then get this locastorage value on page refersh method.
Hope this helps:)

Answer 4

You can Add the class using ng-class, like this.
ng-class="{active: $index == selected}"
Here, .active is added to class list on the condition $index == selected
and to remove the .active from the list, reset the selected by
$scope.selected = -1