AngularJS 1.2.x and $q inside foreach loop

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $q, $timeout, $http) {
  $scope.name = 'World';
  $scope.notes = [];
  $scope.listOfModules = [{
    name: 'ABC'
  }, {
    name: 'XYZ'
  }];

  $scope.working = false;
  $scope.refreshNewQ = function() {
    $scope.working = true;
    doWhateverWithAll($scope.listOfModules).then(function(results) {
      $scope.working = false;
      $scope.notes.push('Finished queing...');
    });
  }

  $scope.refreshQ = function() {
    $scope.working = true;
    $scope.notes = [];
    $scope.listOfModules.forEach(function(element, index) {

      $scope.notes.push(element.name);
      //console.log(element.name);
      var defer = $q.defer();
      defer.resolve(one(element.name));
      defer.promise.then(function(data) {
        $scope.notes.push('1- ' + data);
        two(element.name).then(function(data) {
          $scope.notes.push('2- ' + data);
          three(element.name).then(function(data) {
            $scope.notes.push('3- ' + data);
          }); // End of three callback
        }); // end of two callback
      }); // end of one callback

    }) // end of foreach loop
    $scope.working = false;
  } // enf of refresh function

  function doWhateverWithAll(someArray) {
    // Mark which request we're currently doing
    var currentRequest = 0;
    // Make this promise based.
    var deferred = $q.defer();

    makeNextRequest();

    function makeNextRequest() {
      // Do whatever you need with the array item.
      one(someArray[currentRequest].name)
        .then(function() {
        $scope.notes.push('1 - one done for ' + someArray[currentRequest].name);           return two(someArray[currentRequest].name);
        })
        .then(function() {
        $scope.notes.push('2 - two done for ' + someArray[currentRequest].name);
          return three(someArray[currentRequest].name);
        }).then(function(data) {
        $scope.notes.push('3 - three done for ' + someArray[currentRequest].name);
          // Increment progress.
          currentRequest++;
          // Continue if there are more items.
          if (currentRequest < someArray.length) {
            makeNextRequest();
          }
          // Resolve the promise otherwise.
          else {
            deferred.resolve();
          }
        })
    }
    // return a promise for the completed requests
    return deferred.promise;
  }

  function one(data) {
    var q = $q.defer();
    $http.get('http://httpbin.org/delay/3').success(function(response) {
      q.resolve("one done for " + data);
    });
    return q.promise;
  }

  function two(data) {
    var q = $q.defer();

    $http.get('http://httpbin.org/delay/2').success(function(response) {
      q.resolve("two done for " + data);
    });
    return q.promise;
  }


  function three(data) {
    var q = $q.defer();

    $http.get('http://httpbin.org/delay/4').success(function(response) {
      q.resolve("three done for " + data);
    });
    return q.promise;
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h3>Please click on RefreshQ button and check the output. <br/> We need output like written in red color.</h3>
    <ul>
      <li ng-repeat = "note in notes track by $index">{{note}}</li>
    </ul>
    <button ng-click="refreshQ()">RefreshQ</button>
    <button ng-click="refreshNewQ()">Refresh NewQ</button>
    <span ng-show="working">Please wait ... We're working..!!</span>
    <br/>
    
    <h3>Desired output should be like this - </h3>
    
    <ul style='color:red'>
      <li>ABC</li>
      <li>1- one done for ABC</li>
      <li>2- two done for ABC</li>
      <li>3- three done for ABC</li>
      <li>XYZ</li>
      <li>1- one done for XYZ</li>
      <li>2- two done for XYZ</li>
      <li>3- three done for XYZ</li>
    </ul>
  </body>

</html>

/* Put your css in here */