Edit in JSFiddle

Result
JavaScript
HTML

angular.module('app', [])
    .controller('main', ['$scope', '$http', '$interval', '$timeout', '$q', function ($scope, $http, $interval, $timeout, $q) {

    /*
    $http.get('http://echo.jsontest.com/key/value/one/two').success(function (data, status, headers, config) {
        console.log(data);
    });
    */
    /*
    function asyncGreet(name) {
      // perform some asynchronous operation, resolve or reject the promise when appropriate.
      return $q(function(resolve, reject) {
        setTimeout(function() {
          if (true) {
            resolve('Hello, ' + name + '!');
          } else {
            reject('Greeting ' + name + ' is not allowed.');
          }
        }, 1000);
      });
    }
*/
        
        
    function asyncGreet(name) {
      var deferred = $q.defer();
    
      setTimeout(function() {
        if (true) {
          deferred.resolve('Hello, ' + name + '!');
        } else {
          deferred.reject('Greeting ' + name + ' is not allowed.');
        }
      }, 1000);
    
      return deferred.promise;
    }
        
    var promise = asyncGreet('Peter');

    promise.then(function(greeting) {
      alert('Success: ' + greeting);
    }, function(reason) {
      alert('Failed: ' + reason);
    });

    $scope.fruits = ['apple', 'pear', 'plum'];

    $scope.message = 'Loading the DFP API';
        
    var p = $timeout(function() {
        $scope.message = 'DFP API has loaded';
    }, 2000);
        
    p.then(function() {
        // Stuff that depends on API being there
        
        // Generating slots
        var p2 = $timeout(function () {
            $scope.message = 'We have the slots';
            
            var slots = [ 1, 2, 3, 4 ];
            
            return slots;
        }, 2000);
        
        p2.then(function(slots) {
            console.log(slots);
        });
    });
}]);

<body ng-app="app">
    <div class="container" ng-controller="main">
        <div class="row">
            <div class="col-md-12">
                <pre>{{ message }}</pre>
            </div>
        </div>
    </div>
</body>