title: Unit testing AngularJS controller with $httpBackend
body: <p>For the life of me I can't get $httpBackend to work on a controller that does an $http get request.  I've tried for hours now =)</p>
  
  <p>I've reduced this to the simplest form I can below.  The test passes if I </p>
  
  <ul>
  <li>comment out the $http.get() request in the controller</li>
  <li>comment out the "httpMock.flush()" in the test</li>
  <li>and change "pig" and "dog" to match</li>
  </ul>
  
  <p>That is, it's a valid, working test and app.</p>
  
  <p>If I put it back in, I get the error shown at the bottom.</p>
  
  <hr>
  
  <p><em>app/js/app.js</em></p>
  
  <pre><code>// Declare a module which depends on filters and services.
  var myApp = angular
    .module('myApp', ['ngRoute', 'myApp.filters', 'myApp.services',
                                'myApp.directives'])
    .config(['$routeProvider' , function($routeProvider) {
  
      $routeProvider
        .when("/dashboard", {
          templateUrl: "partials/dashboard.html",
          controller: cDashboard
        })
  
        .otherwise({redirectTo: "/dashboard"});
    }]);
  
  // Pre-define our main namespace modules.
  angular.module('myApp.directives' , []);
  angular.module('myApp.filters'    , []);
  angular.module('myApp.services'   , []);
  angular.module('myApp.controllers', []);
  </code></pre>
  
  <p><em>app/js/controller.js</em></p>
  
  <pre><code>function cDashboard ($scope, $http) {
    $scope.data = "dog";
  
    // Fetch the actual data.
    $http.get("/data")
      .success(function (data) { $scope.data = data })
      .error(function () {});
  }
  
  cDashboard.$inject = [ '$scope', '$http' ];
  </code></pre>
  
  <p><em>test/unit/controllerSpec.js</em></p>
  
  <pre><code>describe('cDashboard', function(){
    var scope, ctrl, httpMock;
  
    beforeEach(inject(function ($rootScope, $controller, $http, $httpBackend) {
      scope = $rootScope.$new();
      ctrl = $controller('cDashboard', {$scope: scope});
  
      httpMock = $httpBackend;
      httpMock.when("GET", "/data").respond("pig");
    }));
  
    it("should get 'pig' from '/data'", function () {
      httpMock.expectGET("/data").respond("pig");
      expect(scope.data).toBe("pig");
    });
  
  });
  </code></pre>
  
  <p>And this is the error I get in the shell:</p>
  
  <pre><code>INFO [watcher]: Changed file "/home/myApp/test/unit/controller/cDashboard.js".
  Chrome 26.0 (Linux) cDashboard should get 'pig' from '/data' FAILED
      Error: No pending request to flush !
          at Error (&lt;anonymous&gt;)
          at Function.$httpBackend.flush (/home/myApp/test/lib/angular/angular-mocks.js:1171:34)
          at null.&lt;anonymous&gt; (/home/myApp/test/unit/controller/cDashboard.js:15:18)
  Chrome 26.0 (Linux): Executed 1 of 1 (1 FAILED) (0.326 secs / 0.008 secs)
  </code></pre>