AngularJS : change font awsome icon color and background on click
<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>