AngularJS - Service is not defined error in function but fine in controller - ReferenceError: systemService is not defined

Question

I'm really new to AngularJS so this might be really obvious!

I've got a service which does some basic checks and then returns the information. I call this service in a controller and in a function.

When I call it in the controller it works fine without an error.

When I call it in the function I get

angular.js:9101 ReferenceError: systemService is not defined

Call to service in Controller that works:

myApp.controller('continueController', ["$scope", "$rootScope", 'systemService', function ($scope, $rootScope, systemService) {
            $scope.ContinueAngularMethod = function () {

                $rootScope.field = 'payment';
                $scope.field = $rootScope.field;
                $scope.notApp = '1';
                console.log("I don't error in here");
                $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);
                $rootScope.$apply();
            }
        }]);

Call to service in function that doesn't work:

function MyCtrl($scope) {

                $scope.changeme = function () {
                    console.log("Drop down changes ideally do something here....");

                    //Call to service  
                    $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);

                    console.log($scope.ss.field);
                    console.log($scope.ss.notAppJ);

                }

This is my code in full:

<script type='text/javascript'>

        //Angular stuff
        var myApp = angular.module('myApp', []);

        //Set up my service
        myApp.service('systemService', function () {

            this.info = {}; //Declaring the object

            this.checkDropDownValue = function (type, notAppJ) {


                if (type != 'PayPal') {
                    console.log("I am not PayPal");
                    field = 'other'
                    notApp = '0';
                }
                else if (type == 'PayPal' && notApp == '1') {
                    console.log("i am in the else if - functionality later");
                }
                else {
                    console.log("i am in the else - functionality later");
                }

                this.info.field = type;
                this.info.number = notApp;

                return this.info;
            };

        });

        myApp.controller('continueController', ["$scope", "$rootScope", 'systemService', function ($scope, $rootScope, systemService) {
            $scope.ContinueAngularMethod = function () {

                $rootScope.field = 'payment';
                $scope.field = $rootScope.field;
                $scope.notApp = '1';
                console.log("I don't error in here");
                $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);
                $rootScope.$apply();
            }
        }]);

        function MyCtrl($scope) {

            $scope.changeme = function () {
                console.log("Drop down changes ideally do something here....");

                //Call to service  
                $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);

                console.log($scope.ss.field);
                console.log($scope.ss.notAppJ);

            }

            $scope.myFunct = function (keyEvent) {

            if (keyEvent.which === 13) {
                //They hit the enter key so ignore this 
                keyEvent.preventDefault();
            }

            //Becauase a new child scope is generated you can't use $scope as that refers to the parent . But this refers to the child. 
            var rPromise = findAll(this.softwareText);

            }
        }

    </script>

I tried these without any luck:

angular Uncaught ReferenceError: Service is not defined

AngularJS - ReferenceError: $ is not defined

Initialize $scope variables for multiple controllers - AngularJS

Answer 1

Your use of defining the MyCtrl is deprecated, you need angular to inject the systemService depedency in order to use it.

Try defining the MyCtrl controller the same way you defined continueController , like this:

    myApp.controller('MyCtrl', ["$scope", 'systemService', function ($scope, systemService) {
        $scope.changeme = function () {
            console.log("Drop down changes ideally do something here....");

            //Call to service  
            $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);

            console.log($scope.ss.field);
            console.log($scope.ss.notAppJ);

        }

        $scope.myFunct = function (keyEvent) {

        if (keyEvent.which === 13) {
            //They hit the enter key so ignore this 
            keyEvent.preventDefault();
        }

        //Becauase a new child scope is generated you can't use $scope as that refers to the parent . But this refers to the child. 
        var rPromise = findAll(this.softwareText);

        }
    }]);

Answer 2

MyCtrl shoud provide dependency to systemService with $inject property like

function MyCtrl($scope, systemService) {

}

MyCtrl.$inject = ['$scope', 'systemService']