title: How to make a 'top-level'-controller in angular-js?
body: <p>AngularJS newbie here.... I have a basic framework of an app located here:</p>
  
  <p><a href="http://plnkr.co/edit/HlQvMKF735YrBL2tOYGf?p=preview" rel="nofollow">http://plnkr.co/edit/HlQvMKF735YrBL2tOYGf?p=preview</a></p>
  
  <p>The app contains an app.js and a couple of sub-models/controllers.</p>
  
  <p>app.js:</p>
  
  <pre><code>var app = angular.module('MyApp', ["ngRoute","page1","page2"]);
  
  app.config(['$routeProvider', function ($routeProvider) {
  
      //$routeProvider.otherwise({redirectTo: '/page1/'});  // this works just fine if uncommented
  
  }]);
  
  app.controller('MainCtrl', function($scope) {   // none of this works
  
      $scope.pageTitle = "Page Title";  //
      $scope.myName = 'Scott';
  
      $scope.hideSessionInfo = true;
      $scope.toggleSessionData = function() {
          console.log('toggleSessionData');
          $scope.hideSessionInfo = !$scope.hideSessionInfo;
      };
  });
  </code></pre>
  
  <p>I want there to be a top-level controller to handle states of items outside of the ng-view. (i.e. showing/hiding some server session info)  </p>
  
  <p>I can't get this outer-level controller to work.  The controllers on the routes work just fine.</p>
  
  <p>I know I'm doing something fundamentally wrong, but I can't figure it out. </p>
  
  <h2>Updated</h2>
  
  <p>Fixed by adding the ng-controller onto the body and giving it my global controller name.</p>
  
  <p>Thanks,
  Scott</p>