title: AngularJS : change font awsome icon color and background on click
body: <p>I am new to angularJS. what I want is , I have some social links icons along with textbox. by default <strong>linkedin</strong> icon is selected. when I click on facebook icon, then its color should be changed to blue background and also textbox with facebook link should get changed and <strong>linkedin</strong> background should be as gray as others icons.</p>
  
  <p><a href="https://i.stack.imgur.com/0Flze.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Flze.png" alt="here is the image"></a></p>
  
  <p>How can I achieve using angularjs?</p>
  
  <p>Any help would be great.</p>
  
  <p>Thank You.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.controller('SocialIconController', function($scope) {
    $scope.option = "linkedin";
    $scope.social_toggle = false;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.exhibitor_social_icon {
    background: #d7d6d6;
    height: 20px;
    width: 20px;
    padding: 5px 10px 5px;
    margin: 0 3px;
    cursor: pointer;
  }
  .linked_in_bg_color {
    background: #0077B5;
    width: auto;
    border: thin white solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app=""&gt;
    &lt;div class="form-group margin_top_20" ng-controller="SocialIconController"&gt;
      &lt;label class="col-md-2 col-sm-2 col-xs-12 control-label set_padding_0"&gt;Social Link&lt;/label&gt;
      &lt;div class="col-md-10 col-sm-10 col-xs-10 set_padding_0"&gt;
        &lt;span class="exhibitor_social_icon linked_in_bg_color margin_left_0" ng-click="social_toggle = !social_toggle" ng-class="{exhibitor_social_icon : !social_toggle, linked_in_bg_color : social_toggle}"&gt;
                                  &lt;i class="fa fa-linkedin text-white"&gt;&lt;/i&gt;
                              &lt;/span&gt;
        &lt;span class="exhibitor_social_icon" ng-click="social_toggle = !social_toggle" ng-class="{exhibitor_social_icon : !social_toggle, linked_in_bg_color : social_toggle}"&gt;
                                  &lt;i class="fa fa-facebook text-white" &gt;&lt;/i&gt;
                              &lt;/span&gt;
  
        &lt;span class="exhibitor_social_icon"&gt;
                              &lt;i class="fa fa-twitter text-white" &gt;&lt;/i&gt;
                              &lt;/span&gt;
        &lt;input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="!social_toggle"&gt;
        &lt;input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="social_toggle"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>there are two text boxes by default in the stackoverflow code editor it should be only one by default.</p>
  
  <p>Here is <a href="https://jsfiddle.net/8288pyz7/" rel="nofollow noreferrer">JSFiddle</a></p>