title: Angularjs: Uncaught ReferenceError $rootScope is not defined
body: <p>I am trying to run  and got this message:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: $rootScope is not defined at app.js line 12</p>
  </blockquote>
  
  <p>here is my js/app.js</p>
  
  <pre><code>angular.module('addEvent', ['ngRoute'])
      .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
          $routeProvider.when('/add-event', {
                  templateUrl: 'views/add-event.html',
                  controller: 'formCtrl',
                  controllerAs: 'eventCtl'
              })
              .otherwise({
                  redirectTo: '/'
              });
          $locationProvider.html5Mode(true);
      }])
      .run(['$rootScope', function() {
          $rootScope.event = [];
      }]);
  </code></pre>
  
  <p>this js/controller.js</p>
  
  <pre><code>  angular.module('addEvent')
        .controller('formCtrl', ['eventFactory', function(eventFactory) {
            //$scope.event=[];
            this.event = eventFactory.getAllEvents();
            this.submitForm = function(form) {
                eventFactory.createEvent(angular.copy(form), this.event);
                // $scope.event.push(angular.copy(form));
                console.log($scope.event);
            }
        }])
  </code></pre>
  
  <p>services/eventFactory.js</p>
  
  <pre><code>angular.module('addEvent')
      .factory('eventFactory', function() {
          var eventFactory = {};
          var events = [];
          eventFactory.getAllEvents = function() {
              return events;
          }
          eventFactory.createEvent = function(event, eventList) {
              events.push(event);
              eventList = events;
              return eventList;
          }
          return eventFactory;
      })    
  </code></pre>
  
  <p>And at index.html I added script this way</p>
  
  <pre><code>&lt;script src="./js/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="./js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="./js/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="./js/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="./js/app.js"&gt;&lt;/script&gt;
  &lt;script src="./js/controller.js"&gt;&lt;/script&gt;
  &lt;script src="./services/eventFactory.js"&gt;&lt;/script&gt;
  </code></pre>