title: angular ng-click to change class on click
body: <p>I am trying to remove all classes "<strong>fa-3x</strong> " and change all classes to "<strong>fa-lg</strong>" and add a class called="<strong>testClass</strong>", when the user click on class <strong>toggle-button</strong>. is it possible to do it in angular? really appreciate. your help</p>
  
  <p>I know in jquery it very simple using add class and removeClass. can someone show me How to do it in angular? </p>
  
  <pre><code>  &lt;div ng-controller="MainContainerController" ng-Click="toggleClass()"&gt;
          &lt;ul class="nav" &gt;
              &lt;li&gt;
                  &lt;a class="toggle-button"&gt;&lt;i class="fa fa-exchange"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a ui-sref="Home" ng-class="ActiveMenu('Home')"&gt;
                     &lt;i class="fa fa-home fa-3x"&gt;&lt;/i&gt;
                     &lt;span&gt;Home&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a ng-class="ActiveMenu('Work')"&gt; 
                     &lt;i class="fa fa-bar-chart-o fa-3x"&gt;&lt;/i&gt;
                     &lt;span&gt;Work &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a ui-sref="Music" ng-class="ActiveMenu('Music')"&gt;
                     &lt;i class="fa fa-table fa-3x"&gt;&lt;/i&gt;
                     &lt;span&gt;Scenario &lt;br/&gt;Music&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a ui-sref="faq"&gt;
                     &lt;i class="fa fa-faq fa-3x"&gt;&lt;/i&gt;                           
                     &lt;span&gt;Faq&lt;/span&gt; 
                  &lt;/a&gt;
              &lt;/li&gt;
         &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>