title: AngularJS: Getting $scope is not defined error when I already have $scope declared
body: <p>I've been trying a few different configurations, but I keep getting a <code>$scope is not defined error</code> with my AngularJS file, despite having it defined in the controller.</p>
  
  <p>I'm trying to get both the <code>$scope.idStore</code> and <code>$scope.patientTime</code> 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 <code>patientID</code> variable. <code>patientTime</code> concatenates this ID with an additional timestamp, then generates an alert message.</p>
  
  <p>Testing shows that I get the error when trying to read the <code>idStore</code> or <code>patientTime</code></p>
  
  <p>Below is the main AngularJS code:</p>
  
  <pre><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.');
        }
  }());
  </code></pre>
  
  <p>My suspicion is centered on how I have this AngularJS file set up. <strong>Was this done incorrectly?</strong></p>