AngularJS Route resolve property promise fails

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

  <head>
    <script data-require="angularjs@1.6.4" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="angular-route@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

      <body>
        <ng-view></ng-view>
    </body>

</html>

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

/*
// This section doesn't use the resolve property
app.config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'greetingTemplate.html',
        controller: 'greetingCtrl'
    });
});

app.controller('greetingCtrl', function($scope, greetingService) {
    // Call service from beginning of controller directly. Route is resolved without waiting for this
    var greetingPromise = greetingService.getGreeting();
    greetingPromise.then(function(greeting) {
        console.log(greeting);
        $scope.answer = "Successful Greeting = "+greeting;
      }, function(failure) {
          $scope.answer = failure;
          console.log("UI failure message");
        });
});
*/


// This section uses resolve property
app.config(function($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'greetingTemplate.html',
      controller: 'greetingCtrl',
      // When the resolve property is used in the route, the route will wait to return until all properties of the object are resolved
      // To handle a rejected promise, a then function is needed here. Maybe "route level" logging can be done here
      // as well? Seems like resolve property could have more code in it then I would like
      resolve: {
        greeting: function(greetingService){
            return greetingService.getGreeting().then(function(success) {return success;}, function(failure){
              console.log("Failed");
              return failure;
            });
        }
      }
    });
});

app.controller('greetingCtrl', function($scope, greeting) {
  $scope.answer = greeting;
});


app.service('greetingService', function($q, $timeout) {
     var _this = this;
        _this.getGreeting = function() {
            return $q(function(resolve, reject) {
              $timeout(function() {
              console.log("Inside promise");
                //resolve("Hello from the greetings service");
                reject("Greeting Failed");
            },5000);
            });
        };
});

/* Styles go here */

<p>Greeting Below</p>
<p>{{answer}}</p>