title: Injecting multiple Services to Controller throws error- AngularJs
body: <p>My code is like this</p>
  
  <pre><code>Services.JS
      angular.module('RateRequestApp.services', []).factory('rateRequestService', ['$http', rateRequestService]);
  
  function rateRequestService($http) {
      var service = { getData: getData};
      return service;
      function getData() {
          return $http({
              method: 'Get',
              url: '../services/asas.asmx/GetReadOnlyData?shipmentID=' + getQuery('shipmentId')
          });
      }
      function getQuery(name) {
          var match = RegExp('[?&amp;]' + name + '=([^&amp;]*)').exec(window.location.search);
          return match &amp;&amp; decodeURIComponent(match[1].replace(/\+/g, ' '));
      }
  }
  
  angular.module('RateRequestApp.services', []).factory('rePrintService', ['$http', rePrintService]);
  function rePrintService($http) {
      var service = { getReprintData: getReprintData };
      return service;
      function getReprintData() {
          return $http({
              method: 'Get',
              url: '../services/asas.asmx/RePrint?shipmentID=' + getQuery('shipmentId')
          });
      }
      function getQuery(name) {
          var match = RegExp('[?&amp;]' + name + '=([^&amp;]*)').exec(window.location.search);
          return match &amp;&amp; decodeURIComponent(match[1].replace(/\+/g, ' '));
      }
  
  }
  
  
  Controller.JS
  
  
      angular.module('RateRequestApp.controllers', []).controller
  ('ReadOnlyController', [
      '$scope', 'rateRequestService', 'rePrintService', '$controller',
      function($scope, rateRequestService, rePrintService, $controller) {
          $scope.rateData = [];
          rateRequestService.getData().success(function(response) {
                  $scope.rateData = response;
                  console.log(JSON.stringify(response));
              }).
              error(function(data, status, headers, config) {});
          rePrintService.getReprintData().success(function(response) {
              }).
              error(function(data, status, headers, config) {});
  
      }
  ]);
  
  App.js
  angular.module('RateRequestApp', [
     'RateRequestApp.services',
     'RateRequestApp.controllers',
     'ui.bootstrap'
  ]);
  </code></pre>
  
  <p>Everything looks okay to me, But this throws an error</p>
  
  <pre><code>Error: [$injector:unpr] Unknown provider: rateRequestServiceProvider &lt;- rateRequestService
  </code></pre>
  
  <p>When I Inject only my first service, It works correct. but when second comes it breaks.
  Can any one point out what I am doing wrong?</p>