Injecting custom service into Angular Controllers

Question

I'm moving away from my original plan of working with $rootScope to pass data around my angular application because I realise it's not a good idea! I'm attempting to set up a service between my two controllers which will enable me to pass data from controller A to controller B.

Currently I've got the following code in my application.js file:

'use strict';

var application = angular.module('myApp', []);

//Service between 2 Controllers:
application.factory('interfaceService', function ($rootScope) {

    var interfaceService = {};
    interfaceService.redirect = "";
    interfaceService.iframe = "";
    interfaceService.lightbox = "";

    interfaceService.prepForBroadcast = function (redirect, iframe, lightbox) {
        this.redirect = redirect;
        this.iframe = iframe;
        this.lightbox = lightbox;
        this.broadcastItem();
    };

    interfaceService.broadcastItem = function () {
        $rootScope.$broadcast('handleBroadcast');
    };
    return interfaceService;
   });
});

I then have the following set up for Controller A:

application.controller('SidebarController', ['$scope', '$rootScope', '$http', '$state', 'interfaceService', function ($scope, $rootScope, $http, $state, $translate, interfaceService) {
 //Select Integration
    var lightbox = false;
    var iframe = false;
    var redirect = false;
    $scope.integrationType = function (integrationChoice) {
        switch (integrationChoice) {
        case "redirect":
            redirect = true;
            iframe = false;
            lightbox = false;
            interfaceService.prepForBroadcast(redirect, iframe, lightbox);
            break;
        case "iframe":
            iframe = true;
            redirect = false;
            lightbox = false;
            interfaceService.prepForBroadcast(redirect, iframe, lightbox);
            break;
        case "lightbox":
            lightbox = true;
            redirect = false;
            iframe = false;
            interfaceService.prepForBroadcast(redirect, iframe, lightbox);
            break;
        }
    }
    $scope.$on('handleBroadcast', function () {
        $scope.lightbox = interfaceService.lightbox;
        $scope.iframe = interfaceService.iframe;
        $scope.redirect = interfaceService.redirect;
        console.log('SidebarController recieving information!');
    });
}]);

and Controller B (Where I want to send the information to):

application.controller('MainPageController', ['$scope', '$rootScope', '$http', '$state', '$window', 'interfaceService', function ($scope, $rootScope, $http, $state, $window, $translate, $location, interfaceService) {
    $scope.$on('handleBroadcast', function () {
        $scope.lightbox = interfaceService.lightbox;
        $scope.iframe = interfaceService.iframe;
        $scope.redirect = interfaceService.redirect;
        console.log('MainController recieving information!');
    });

}]);

When I attempt to run the application I get the following error in my console:

TypeError: Cannot read property 'prepForBroadcast' of undefined
    at h.$scope.integrationType (app.js:400)
    at fn (eval at <anonymous> (all.js:4), <anonymous>:4:368)
    at e (all.js:2)
    at i (all.js:5)
    at h.$eval (all.js:3)
    at h.$apply (all.js:3)
    at h.scopePrototype.$apply (hint.js:1427)
    at HTMLLabelElement.<anonymous> (all.js:5)
    at Dt (all.js:1)
    at HTMLLabelElement.n (all.js:1)

I figure it's because I amn't actually injecting my service correctly? But I'm not entirely sure as to where I'm going wrong exactly. Would anyone have any idea?

Many thanks in advance

Answer 1

Please fix MainPageController as

application.controller('MainPageController', ['$scope', '$rootScope', '$http', '$state', '$window', 'interfaceService', function ($scope, $rootScope, $http, $state, $window, $translate, $location, interfaceService) {}])

has incorrect number of arguments. Order of passed arguments to array should be the same as list of function arguments.