"is not a function" type error inside $scope.$on
<p>I ran into a specific problem working with Angular. I have a parent controller named <strong>uploadController</strong> that has a <strong>validateFiles</strong> function to validate the uploaded files.</p>

<p>On a button click from UI , a modal popup is opening there I can input some values. On submit of that form I want to invoke that validateFiles method which is on other controller(the name of modal controller is <strong>UserUploadDataCtrl</strong> with the input data from the UI modal form).</p>

<p>I thought $rootScope.$broadcast in UserUploadDataCtrl and $scope.$on in uploadController would be great.</p>

<p>What I did is ...</p>

<pre><code>if ($scope.groupMembershipUserInputForm.$valid) {
    $scope.groupmembershipUploadParams = {
        "chapterCode": $scope.groupmembership.chapterCode,
        "groupCode": $scope.groupmembership.groupCode,
        "createdDate": $filter('date')(new Date($scope.groupmembership.createdDate), 'MM/dd/yyyy'),
        "endDate": $filter('date')(new Date($scope.groupmembership.endDate), 'MM/dd/yyyy')
    }

    $rootScope.$broadcast('validateUploadedFilesEvent', $scope.groupmembershipUploadParams); 
</code></pre>

<p>and then in <strong>uploadController</strong></p>

<pre><code>// NOW VALIDATE THE UPLOADED THE FILES.
$scope.$on('validateUploadedFilesEvent', function (event, arg) {
    UploadDataServices.setUploadParams(arg);
    $scope.validateFiles();
});
</code></pre>

<p>It says <strong>UploadDataServices.setUploadParams(arg)</strong> is not a function.</p>

<p>But I have used it many times the same way . </p>

<pre><code>UploadModule.factory('UploadDataServices', ['$http', '$rootScope', '$filter', function ($http, $rootScope, $filter) {


    var uploadParams = null;

    return {

        setUploadValidationResult: function (result) {
            uploadValidationResultData = result;
        },

        getUploadValidationResult: function () {
            return uploadValidationResultData;
        },


        setUploadParams: function (params) {
            uploadParams = params;
        },

        getUploadParams: function () {
            return uploadParams;
        }
</code></pre>

<p>....</p>

<p>Where am I doing wrong? </p>

<p>Here is the error </p>

<p><a href="https://i.stack.imgur.com/GG4OG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GG4OG.png" alt="enter image description here"></a></p>

<p>Here is the uploadController definition</p>

<pre><code>UploadModule.controller('GroupMembershipUploadController', ['$scope', '$location', '$log', 
    '$window', '$localStorage', 'mainService', '$state', '$rootScope', '$http', '$uibModal', '$uibModalStack', 'uiGridConstants', 'UploadDataServices', 'UploadServices',
function ($scope, $location, $log, $window, $localStorage, mainService, $state, $rootScope, $http, $uibModal, $uibModalStack, uiGridConstants, UploadDataServices, UploadServices) {
</code></pre>