title: Angular routing setup gives "is not a function" error
body: <p>I get this error <code>Error: Argument 'readingController' is not a function, got undefined.</code> and nothing renders on the page. What have I done wrong?</p>
  
  <pre><code>var app = angular.module('Tutorials', ['functions', 'ui.utils', 'tutorials']).controller('main', function($scope, $element, Position, Romanize) {
  $scope.sectionNumber = Position.sectionNumber;
  $scope.tutorialNumber = Position.tutorialNumber;
  $scope.questionNumber = Position.questionNumber;
  $scope.sections = sections;
  $scope.currentMaterials = []
      $scope.currentMaterial = "";
  
  var readingController = function($scope, Romanize) {
      $scope.currentMaterials = $scope.sections[$scope.sectionNumber].tutorials[$scope.tutorialNumber].material;
      $scope.currentMaterial = $scope.currentMaterials[$scope.questionNumber];
      $scope.getRomanization = function(Romanize) {
          Romanize.get($scope.currentMaterial).then(function(d) {
              $scope.romanized = d;
          });
  
          $scope.$apply();
      };
      $scope.getRomanization(Romanize);
      $scope.$apply();
  
      $scope.checkRomanization = function(userRomanization) {
          if ($scope.romanized === userRomanization) {
              $scope.questionNumber++;
              $scope.getRomanization(Romanize);
          };
      }
  };
  
  $scope.loadFromMenu(0, 0, true);
  
  }).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.when('/grammar/Reading/Basic Vowels', {
      templateUrl: '/grammar/Templates/Reading.html',
      controller: 'readingController'
  }).when('/test/secondTab', {
      templateUrl: '/js/test/angular/views/secondTab.html',
      controller: 'SecondTabCtrl'
  }).otherwise({
      redirectTo: '/'
  });
  
  $locationProvider.html5Mode(true);
  }]);
  </code></pre>