title: AngularJS - Service is not defined error in function but fine in controller - ReferenceError: systemService is not defined
body: <p>I'm really new to AngularJS so this might be really obvious! </p>
  
  <p>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. </p>
  
  <p>When I call it in the controller it works fine without an error. </p>
  
  <p>When I call it in the function I get </p>
  
  <blockquote>
    <p>angular.js:9101 ReferenceError: systemService is not defined</p>
  </blockquote>
  
  <p><strong>Call to service in Controller that works:</strong> </p>
  
  <pre><code>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();
              }
          }]);
  </code></pre>
  
  <p><strong>Call to service in function that doesn't work:</strong> </p>
  
  <pre><code>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);
  
                  }
  </code></pre>
  
  <p><strong>This is my code in full:</strong> </p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  
          //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' &amp;&amp; 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);
  
              }
          }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>I tried these without any luck: </p>
  
  <p><a href="https://stackoverflow.com/questions/39440866/angular-uncaught-referenceerror-service-is-not-defined">angular Uncaught ReferenceError: Service is not defined</a> </p>
  
  <p><a href="https://stackoverflow.com/questions/30773161/angularjs-referenceerror-is-not-defined">AngularJS - ReferenceError: $ is not defined</a> </p>
  
  <p><a href="https://stackoverflow.com/questions/26921071/initialize-scope-variables-for-multiple-controllers-angularjs">Initialize $scope variables for multiple controllers - AngularJS</a></p>