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