title: Jasmine $HTTP requests with mock data
body: <p>Im trying to test $http requests and no matter what I do I cant seem to get it to work. I have a factory that holds the 4 request type GET, POST, PUT, DELETE.</p>
  
  <p>Im trying to test the response from a get request but my scope variable that is assigned the response in the controller is giving an error or undefined = the response from the get request.</p>
  
  <p>The factory code is as follows:</p>
  
  <pre><code>app.factory('requestService', ['$http', function ($http) {
  // reusable requests
  return {
      //reuable get request
      getRequest: function (url) {
          return $http({
              method: 'GET',
              dataType: "json",
              url: url
          });
      },
      //reuable post request
      postRequest: function (url, data) {
          return $http({
              method: 'POST',
              data: data,
              url: url
          });
      },
      //reuable put request
      putRequest: function (url, data) {
          return $http({
              method: 'PUT',
              data: data,
              url: url
          });
      },
      //reuable delete request
      deleteRequest: function (url) {
          return $http({
              method: 'DELETE',
              url: url
          });
      }
  }
  }]);
  </code></pre>
  
  <p>The following is in the controller.</p>
  
  <pre><code>    //get the teams
      $scope.getTeams = function(){
      requestService.getRequest('https:.../teams').then(function (response) {
          $scope.teams = response;
      });
  }
  $scope.getTeams();
  </code></pre>
  
  <p>Jasmine code:</p>
  
  <pre><code>describe('Controller Test', function() {
  var $rootScope, controller;
  
  //Tell the $httpBackend to respond with our mock object
  var teamsResponse = {// Teams Data //};
  
  beforeEach(function() {
      module('myApp')
  });    
  beforeEach(inject(function($rootScope, $controller, _$httpBackend_, $http) {
      $scope = $rootScope.$new();
      controller = $controller;
      controller('Controller', {$scope: $scope});
  
      $httpBackend = _$httpBackend_;
  
      $httpBackend.whenGET('https:...../teams').respond(200, teamsResponse);
  
  }));
  
  it('should load a list of teams', function() {
      $scope.getTeams();
      $httpBackend.flush();
  
      expect($scope.teams).toBe(teamsResponse);
  });
  });
  </code></pre>
  
  <p>The error I get is:</p>
  
  <p>Expected undefined to be {// Teams Data //}</p>