title: SetTimeout inside SetTimeout not firing
body: <p>I am trying to create a button which gives feedback to the action it is performing. In Angular, I am making a put request to the server - at which point I change the button's state to indicate this - then when I receive a response, I change the button's state again to reflect success or failure for 1.5 seconds and then reset it back to what it originally was before the button was clicked. Also at this point a message is displayed to reflect success or failure and after another 5 seconds an additional action should be performed. The message which was displaying should be hidden if it's a failure and the page should be redirect if it was success. It's this last part which I am not getting to work.</p>
  
  <p>My question is thus whether I should be able to put a setTimeout inside another setTimeout? </p>
  
  <p>Here is my code (inside the function for the button):</p>
  
  <pre><code>$scope.resetPassword = function() {
  
      $scope.ShowSuccessMessage = false;
      $scope.ShowFailedMessage = false;
  
      var querystring = $location.search();
  
      var dataObject = { email1 : $scope.formEmail1, email2 : $scope.formEmail2, password1: $scope.formPassword1, password2: $scope.formPassword2, token: querystring.token };
  
      var responsePromise = $http.put("/myurl/", dataObject, {});
  
      //  change colour and icon of reset button for 1.5 sec
      var $el           = $("#resetPassword");
      var resetButton   = 1500;
      var resetMessage  = 5000;
      var originalColor = $el.css("background");
      var originalIcon  = $el[0].firstChild.className; // get first html element in the button, which is the &lt;i&gt;
  
      $el[0].firstChild.className = "fa fa-circle-o-notch fa-spin";
  
      responsePromise.success(function(dataFromServer, status, headers, config) {
        $el.css("background", "#02c66c");
        $el[0].firstChild.className = "fa fa-check-circle";
  
        $scope.ShowSuccessMessage = true;
  
        ResetButton($el, $scope, originalColor, originalIcon, resetButton, true, resetMessage);
      });
  
      responsePromise.error(function(dataFromServer, status, headers, config) {
        $el.css("background", "#d9534f");
        $el[0].firstChild.className = "fa fa-times-circle";
  
        $scope.ShowFailedMessage = true;
  
        ResetButton($el, $scope, originalColor, originalIcon, resetButton, false, resetMessage);
      });
  };
  
  ResetButton = function(el, scope, originalColor, originalIcon, resetButton, success, resetMessage)
  {
    setTimeout(function() {
      el.css("background", originalColor);
      el[0].firstChild.className = originalIcon;
  
      ChangeMessageOrChangeLocation(scope, success, resetMessage);
    }, resetButton);
  }
  
  ChangeMessageOrChangeLocation = function(scope, success, resetMessage)
  {
    if(success) {
      setTimeout(function(){
        window.location = '/signin';
      }, resetMessage);
    }
    else {  
      setTimeout(function() {
        scope.ShowFailedMessage = false;
      }, resetMessage);
    }
  }
  </code></pre>
  
  <p>EDIT: Here is a live example: <a href="http://greedymagpie.azurewebsites.net/passwordreset" rel="nofollow">Greedy Magpie</a> (Please keep in mind this is a work in progress, so not everything on the site will work.) Just click the change password button...</p>