title: Busy Icon keeps running - AngularJS
body: <p>I have implemented a code to show a busy icon and this is it</p>
  
  <pre><code>angular.module("app", [])
  
      .controller('UploadCtrl', function ctrl ($scope, $timeout) {
          $scope.busy = false;
  
          $scope.submit = function () {
              $scope.busy = true;
  
              // pretend to make an http call...
              $timeout(function () {
                  $scope.busy = false;
              }, 10000);
          };
      });
  </code></pre>
  
  <p>This is the index.html file</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Busy Runner&lt;/title&gt;
  &lt;/head&gt;
  &lt;body ng-app="app" ng-controller="ctrl"&gt;
      &lt;button ng-disabled="busy" ng-click="submit()"&gt;Submit &lt;i class="fa fa-spinner fa-spin" ng-show="busy"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I run the code the busy loader keeps running. Please what could be wrong.
  This is the plunk I have made.
  <a href="http://plnkr.co/edit/qkSUDrA6jP4Y0nKvexe6?p=preview" rel="nofollow">view plunk</a></p>