title: How to add class on a button click in Angular JS
body: <p>I have a form with fields which are disabled by default. User can only view the info in it unless they press the edit button. when they click the edit button the fields will be re enable the fields with some new styles(say a green border) i want to add a class to these field which i can style in my CSS. What is the Angular way to do it?</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;form class="form-horizontal" role="form" ng-submit="edit_setting()" ng-controller="ExchangeController"&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Name&lt;/label&gt;
        &lt;div class="col-sm-6"&gt;
          &lt;input type="text" class="form-control" ng-model="name" ng-disabled="true"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Email&lt;/label&gt;
        &lt;div class="col-sm-6"&gt;
          &lt;input type="email" class="form-control" ng-model="email" required ng-disabled="true"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="col-sm-offset-8 col-sm-6"&gt;
          &lt;button type="submit" class="btn btn-success"&gt;Edit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>  function ExchangeController($scope) {
        var details = "https://pvbp.com/api/settings.html?contactid=292351&amp;exchange_id=7124&amp;clearinghouseid=1&amp;token=e5349652507c0esae86d50fdbdc53222cf97&amp;page=view";
        $http.get(details).success(function(response){
            $scope.exchange_dt.exchange_name = response.name;
            $scope.exchange_dt.exchange_host_name = response.email;   
        });
  
        $scope.edit_exchange_setting_click = (function(){
          // add new class for the fields here dynamically        
        });
    }
  </code></pre>