title: How to test Angular controller having a service
body: <p>I am having a controller and service like below</p>
  
  <pre><code>(function () {
  
      var mockController = function ($scope, MockService) {
          $scope.message = "This is a text message";
  
          $scope.getCities = function () {
              $scope.places = [];
              MockService.getCities().then(function (response) {
                  var places = response.data["weather-app:root"].city;
                  if (places) {
                      if (Array.isArray(places)) {
                          $scope.places = places;
                      } else {
                          $scope.places.push(places);
                      }
                  }
              });
          };
  
      };
  
  
      var mockService = function ($http) {
          this.getCities = function () {
              return $http.get("../rest/url", {
                  headers: {
                      'Accept': 'application/yang.data+json'
                  }
              });
          };
      };
  
      angular.module("MockApp", [])
          .service("MockService", mockService)
          .controller("MockController", mockController);
  
  }())
  </code></pre>
  
  <p>I created a mock service like below for mocking the service for unit testing.</p>
  
  <pre><code>(function () {
      angular.module('mock.service', [])
          .service('MockService', function ($q) {
              var mockService = {};
              mockService.getCities = function () {
                  var mydata = {
                      "weather-app:root": {
                          "city": [
                              {
                                  "city-name": "Chennai"
                                  , "country-name": "India"
                              }
  
  
  
  
                              , {
                                  "city-name": "Mangalore"
                                  , "country-name": "India"
                                  }
                                  ]
                      }
                  }
                  return $q.when(mydata);
              };
              return mockService;
  
          });
  }());
  </code></pre>
  
  <p>My test case is like </p>
  
  <pre><code>describe("MockController", function () {
  
      var $scope;
  
      beforeEach(function () {
          module("MockApp");
          beforeEach(module('mock.service'));
  
          inject(function (_$controller_, _$rootScope_, _MockService_) {
              $scope = _$rootScope_.$new();
              controller = _$controller_("MockController", {
                  $scope: $scope
                  , MockService: _MockService_
              });
  
          });
      });
  
      describe("Test", function () {
  
          it("Should be Bangalore", function () {
              $scope.getCities();
              console.log($scope.places);
          });
      });
  
  });
  </code></pre>
  
  <p>the problem is that the then method in controller is not getting called. How can I resolve the issue ?</p>