title: ng-show in angularjs not working on span
body: <p>I'm facing a problem with ng-show in Angularjs. I have a textbox where a user can enter the host name of a server. On entering this information, the hostname of the server gets sent to the backend system which verifies if the server exists or not. I am currently displaying a loading icon in my textbox using bootstrap, font awesome and angularjs. When I receive a response from the server, I change the isLoaded variable to true and I expect the loading icon to stop showing. However, this does not happen. Whatever state the icon is first set to, it never changes after that.</p>
  
  <p>Here's the simplified version of my problem. <a href="https://plnkr.co/edit/9IpMLZhyp7YzOJtHkNuJ?p=preview" rel="nofollow">Plunker Link Here</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form&gt;
          &lt;div class="form-group has-feedback"&gt;
            &lt;label for="server"&gt;Server:&lt;/label&gt;
            &lt;input type="text" id="server" class="form-control" placeholder="server host name"&gt;
            &lt;span ng-show="{{testVm.state}}" class="fa fa-spinner fa-spin form-control-feedback" aria-hidden="true"&gt;&lt;/span&gt;          
            &lt;button class="btn btn-primary" ng-click="testVm.turnOn()"&gt;Activate&lt;/button&gt;
            &lt;button class="btn btn-primary" ng-click="testVm.turnOff()"&gt;Deactivate&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
  </code></pre>
  
  <p>Angular Code:</p>
  
  <pre><code>angular
    .module('test',[])
    .controller('TestController',TestController);
  function TestController() {
    var testVm = this;
    testVm.turnOn = turnOn;
    testVm.turnOff = turnOff;
    testVm.state = false;
    function turnOn() {
      testVm.state = true;
    }
    function turnOff() {
      testVm.state = false;
    }
  </code></pre>
  
  <p>Any help is appreciated. Thanks.</p>