Promises in AngularJs

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div data-ng-app = "pen">
        <div class="container" data-ng-controller = "MainCtrl">
            <h1>{{heading}}</h1>
        <p>{{message}}</p>
        <p>
          <a data-ng-click = "loadText()" href = ""> Refresh </a>
        </p>
      </div>
    </div>
  </body>

</html>

// Code goes here
app = angular.module("pen", []);

app.controller("MainCtrl", function($scope, BaconServe){
  $scope.heading = "Hola!";
  $scope.loadText = function(){
    $scope.message = "Loading...";
    BaconServe.randomText().then(function(data){
      $scope.message = data[0]
    });
  }
  $scope.loadText();
});

app.factory("BaconServe", function($http, $q){
  return {
    randomText: function(){
      var deferred = $q.defer();
      $http({
        method: "GET",
        url: "https://baconipsum.com/api/?type=all-meat&paras=1&start-with-lorem=1"
      }).success(function(data, status, header, config){
        deferred.resolve(data);
      }).error(function(){
        deferred.reject("An error occured while fetching items");
      });
     return deferred.promise;
    }
  }
});

/* Styles go here */
@import url(http://fonts.googleapis.com/css?family=Raleway:400,600,200,800);

body {
  font-smoothing: antialiased;
  font: 120%/1.5 'Garamond';
  font-weight: 200;
  text-align: center;
  padding: 2em;
  background-color: #221000;
  color: #221000;
  
}
.container{
    width: 40%;
    padding: 1em;
    margin: 0 auto;
    border-left:1px solid #ddd;
    background-color: #F9FDD8;
    min-height: 400px;
    overflow: auto;
    border-radius: 4px;
  }
h1 { font-weight: 400; font-family: 'Raleway' }

Promises in AngularJS
----------------------------------

A very simple plunk where I explore exactly how promises are supposed to work in angularjs.