title: How to show either spinner or animated gif on button click until message displayed?
body: <p>From the below code, I want to display either loading spinner or any animated gif until <code>myMessage</code> should be displayed on clicking of <code>Submit</code> button on <code>timeout</code>. How can I do this, please let me know and thanks in advance !</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div ng-controller="Controller"&gt;
    &lt;input type="text" id="inputId" ng-model="enteredMessage" 
  autofocus/&gt;
    &lt;i class="fa fa-spinner fa-spin" style="font-size:24px"&gt;&lt;/i&gt;
    &lt;button type="button"  ng-click="myFunction(enteredMessage)"&gt;Submit&lt;/button&gt;
    Entered: {{myMessage}}
  &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
    myApp.controller('Controller',['$scope','$timeout', function ($scope, $timeout) {
      $scope.myFunction = function(enteredTextMessage){
        $timeout(function() {
          //I need to show the spinner for three seconds until my myMessage loading/displaying complete 
          $scope.myMessage = enteredTextMessage;
        }, 3000);
      }
    }
  ]);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mavdhana/drr3991q/2/" rel="nofollow noreferrer">Fiddle</a>.</p>