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.listOfModules = [{
    name: 'ABC'
  }, {
    name: 'XYZ'
  }];


  $scope.refreshQ = function() {
    $scope.notes = [];
    var deferred = $q.defer();
    var promise = deferred.promise;
    var prom = [];
    $scope.listOfModules.forEach(function(element, i) {
      prom.push(one(element.name));
      prom.push(two(element.name));
      prom.push(three(element.name));
    });
    $q.all(prom).then(function(result) {
      $scope.notes.push('Finish - ' + result);
    });
    deferred.resolve();


  }

  function one(data) {
    var q = $q.defer();
    $http.get('http://httpbin.org/delay/3').success(function(response) {
      q.resolve("one done for " + data);
    });
    //$timeout(function() {
    //  q.resolve("one done for " + data);
    //}, Math.random() * 1000);
    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);
    });
    //$timeout(function() {
    //  q.resolve("two done for " + data);
    //}, Math.random() * 1000);
    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);
    });
    //$timeout(function() {
    //  q.resolve("three done for " + data);
    //}, Math.random() * 1000);
    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>
    
    
    <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 */