title: Angular karma testing controller
body: <p>I'm trying to figure out these karma tests to test my Angular app. I can figure out simple things. But I am having problems with one that connects to my database.</p>
  
  <p>I am wanting to test the $scope.getMultipleOptions function in the controller below:</p>
  
  <pre><code>$scope.options = [];
  
  $scope.getMultipleOptions("form_field_1", $scope.options);
  
  $scope.getMultipleOptions = function (key, opts) {
      var id = key.replace("form_field_", "");
  
      var promise = DynamicFormFactory.GetData('/DynamicForm/GetMultipleOptions?form_field_id=" + id);
  
      promise.then(
          function (success) {
          angular.forEach(success, function (o) {
              opts.push(o);
          });
          },
          function (error) {
          // Error
          }
      );
      }
  </code></pre>
  
  <p>This is what my factory/service looks like:</p>
  
  <pre><code>dynamicFormApp.factory('DynamicFormFactory', ['$http', function ($http) {
          return {
              GetData: function (url) {
                  return $http.get(url)
                          .then(function (response) {
                              return response.data;
                          }, function (error) {
                              return error;
                          });
              }
  }]);
  </code></pre>
  
  <p>And this is what I've done to set up my karma test</p>
  
  <pre><code>describe('DynamicFormController', function () {
  
      beforeEach(module('dynamicFormApp'));
  
      var $controller;
      var $rootScope;
  
      beforeEach(inject(function (_$controller_, _$rootScope_) {
          // The injector unwraps the underscores (_) from around the parameter names when matching
          $controller = _$controller_;
          $rootScope = _$rootScope_;
      }));
  
  
      describe('$scope.getMultipleOptions', function () {
          var $scope, controller;
  
          beforeEach(function () {
              $scope = $rootScope.$new();
  
              controller = $controller('DynamicFormController', { $scope: $scope });
              $scope.fields = [];
          });
  
          it('$scope.getMultipleOptions', function () {
              var key = "form_field_15";
  
              var expectedResult = [{ desc: "DESCRIPTION", id: "ID" }];
  
              $scope.getMultipleOptions(key, $scope.fields);
  
              expect($scope.fields).toEqual(expectedResult);
          });
  
  
      });
  
  });
  </code></pre>
  
  <p>The test always fails as $scope.fields is always empty. How do I do this?</p>