AngularJS: Getting $scope is not defined error when I already have $scope declared

Question

I've been trying a few different configurations, but I keep getting a $scope is not defined error with my AngularJS file, despite having it defined in the controller.

I'm trying to get both the $scope.idStore and $scope.patientTime working in the controller section at the bottom. These functions pull data from input boxes with a certain ID. They are then stored as a patientID variable. patientTime concatenates this ID with an additional timestamp, then generates an alert message.

Testing shows that I get the error when trying to read the idStore or patientTime

Below is the main AngularJS code:

'use strict';

(function() {
//generate JSON-based list for menu links
    var AppCtrl;
    AppCtrl = function () {
        function AppCtrl($scope) {
            $scope.list = [
                {
                    label: 'Main Menu',
                    icon: 'fa fa-home fa-fw 4x',
                    link: '#/appLaunch',
                    move: function() {
                                 console.log("HOME");
                            }
                },
                {
                    label: 'Patient',
                    icon: 'fa fa-user fa-fw 4x',
                    link: '#/pCredential',
                    move: function(){
                        console.log("PATIENT");
                    }
                },
                {
                    label: 'Technician',
                    icon: 'fa fa-user-md fa-fw 4x',
                    link: '#/tLogin',
                    move: function(){
                        console.log("TECHNICIAN");
                    }
                },
                {
                    label: 'Administrator',
                    icon: 'fa fa-cogs fa-fw 4x',
                    link: '#/aLogin',
                    move: function(){
                        console.log("ADMINISTRATOR");
                    }
                }
            ];
        }
        return AppCtrl;
    }();
// Declare app level module which depends on views and components
angular.module('careApp', [
  'ngRoute',
  'ngMaterial',
  'ngAria',
  'ngAnimate',
  'ngMaterialDatePicker',
  'careApp.appLaunch',
  'careApp.pCredential',
  'careApp.dialog1',
  'careApp.pSurvey',
  'careApp.pTheme',
  'careApp.pThanks',
  'careApp.tLogin',
  'careApp.tMain',
  'careApp.aLogin'
])
.config(['$routeProvider', function($routeProvider) {
    //if given invalid partial, go back to appLaunch.html
  $routeProvider.otherwise({redirectTo: '/appLaunch'});
}])

.controller('AppCtrl', ['$scope', AppCtrl]);
      //declare empty patientID to be accessed by functions
      var patientID = '';

      //grab relevant data from input and add it to patientID
      $scope.idStore = function() {
        var patientFirstInitial = document.getElementById('patientFirstInitial');
        var patientLastName = document.getElementById('patientLastName');
        var aptDate = document.getElementById('aptDate');
        var aptTime = document.getElementById('aptTime');
        //store patientID as global variable
        patientID = patientFirstInitial + patientLastName + aptDate + aptTime;
        console.log('Registered ' + patientID);
      }

      //on time selection, concat to patientID, then throw alert
      $scope.patientTime = function(){
        //concats selected theme to patient ID, then sends to database
        var patientTheme = document.getElementById('');
        patientID += patientTheme;
        alert('Patient ' + patientID + ' has been registered.');
      }
}());

My suspicion is centered on how I have this AngularJS file set up. Was this done incorrectly?

Answer 1

You had AppCtrl defined twice in function, Also you are messed up with IIFE closing brackets. It should not be in between after AppCtrl code. It should be there to end.

Code

(function() {
    AppCtrl = function($scope) {
        //why don't have it simple like this
        //inner code will be as is
    };
      // Declare app level module which depends on views and components
    angular.module('careApp', [
      //many dependecies
    ])
    .config(['$routeProvider', function($routeProvider) {
      //if given invalid partial, go back to appLaunch.html
      $routeProvider.otherwise({
        redirectTo: '/appLaunch'
      });
    }])

    .controller('AppCtrl', ['$scope', AppCtrl]);
    //code as is
})();

---

$scope is undefined error has occured because, you had

AppCtrl = function () {

hich is AppCtrl function, without having $scope dependency. And inside that function you are asking for $scope value without injecting it here like function AppCtrl($scope) {

while explaining 2nd part of answer assuming that you had correct, variable references.