trying to testing a directive that makes a service call #angularjs

directive_spec.js

describe("List of Stuff", function() {
  var element = null;
  var scope = null;
  var $compile = null;
  var $httpBackend = null;

  beforeEach(module('app'));
  beforeEach(module("template.html"));

  beforeEach(inject(function(_$compile_, $rootScope, $injector) {
    scope = $rootScope;
    $compile = _$compile_;
    $httpBackend = $injector.get('$httpBackend');
    $httpBackend.when('GET', 'http://fake.api.com/record.agencies_mentioned.Id').respond('');
  }));

  describe('directive is created', function() {
    beforeEach(function() {
      scope.app = {};
      scope.activeDepartment = { };
      scope.listOfData = [ ];
      element = $compile("<div list-directive listOfData='listOfData' active-department='activeDepartment' app='app'></div>")(scope);
      scope.$digest();
    });

    it('has 2 items listed', function() {
      scope.activeDepartment = {
        term: "Bar Agency",
        count: 116
      };

      // This should actually be getting returned after the active department is set and the API response is returned
      scope.listOfData = [
        { record: { matterof: ["One"], decision: { value: "deny" } } },
        { record: { matterof: ["Two", "Three"], decision: { value: "dismiss" } } },
      ];

      scope.$digest();
      
      // Setting an active department on the scope should have triggered an API call that would prepare the listOfData.
      // How can I make that API call and get the prepared listOfData that would happen from setting the active department without actually making that API call?
      expect($(".list .decision", element).length).toBe(2);
    });

    it('has the matterof of "Two, Three" as the second decision', function() {
      expect($(".list .decision:last a", element).text().trim()).toEqual("Two, Three");
    });
  });
});