title: Angular.js unable to change scope variable value just after a different function call
body: <p>I'm trying to implement a Refresh button for fetching latest search results from an external index. When I click on the Refresh button the icon is supposed to spin. My plan was to have a scope variable for deciding if the icon should spin or not. For that I'm using a variable called <code>$scope.refreshing</code></p>
  <p><strong>My view</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;button class=&quot;refresh-button&quot; ng-click=&quot;refresh()&quot;&gt;
      &lt;i class=&quot;fa fa-refresh ng-scope&quot; ng-class=&quot;{'fa-spin': refreshing.state}&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
           Refresh
  &lt;/button&gt;
  </code></pre>
  <p><strong>My controller</strong></p>
  <pre><code>      $scope.refreshing ={state: false};
        $scope.refresh = function(){
          $scope.refreshing.state = true;
          $scope.search();
          $scope.refreshing.state = false;
        }
  </code></pre>
  <p>The <code>$scope.search()</code> sends an HTTP request to a server and displays the new results. But I'm having the problem such that the <code>$scope.refreshing</code> variable change doesn't happen sequentially such that it becomes false only after calling the search function due to the asynchronous nature. Because of that the icon doesn't spin.</p>
  <p><strong>Actual</strong><br />
  <a href="https://i.stack.imgur.com/3KXMu.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3KXMu.gif" alt="enter image description here" /></a><br />
  <strong>Expected</strong><br />
  <a href="https://i.stack.imgur.com/WeTXl.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WeTXl.gif" alt="enter image description here" /></a></p>
  <p>Would it be possible to perform this without doing any changes to the <code>search()</code> function.</p>