Angularjs - не удается разрешить необходимую зависимость при попытке использовать глобальный сервис

Я использую функцию, которая используется в более чем 1 контроллере, поэтому я решил создать сервис и использовать его во всем мире.

Вот почему я включил файл commonService.js в свой index.html

'use strict';
var myApp = angular.module('myAppName');
myApp.service(['loadHttpService', '$window', '$http', function (loadHttpService, $window, $http) {
    this.loadHttpService = function (url) {
        ...
        };
        return $http.jsonp(url, {
                params: {
                    callback: "JSON_CALLBACK"
                }
            })
            .then(function (response) {
                ...
            });    
    };
}]);

и использовал его в моем homeController, включая службу как зависимость, как показано ниже:

'use strict';    
angular.module('Home') 
.controller('HomeController', ['$scope', '$rootScope', '$http', '$window', '$state', 'loadHttpService',   
    function ($scope, $rootScope, $http, $window, $state, loadHttpService) {
        ...
        var url = "http://xxx";
        loadHttpService.loadHttp(url);

    }]);

Но это приводит меня к такой ошибке https://docs.angularjs.org/error/ $ injector/unpr? P0 = loadHttpServiceProvider %20% 3C- %20loadHttpService %20% 3C- %20HomeController

Почему это происходит и как это исправить?

Обратите внимание: myAppName - это имя моего приложения (используется в ng-приложении).

Я очень новичок в angularjs и не стесняюсь добавлять какие-либо подсказки, чтобы сделать это лучше.