Angular Controller is not a function

Question

This seems to be yet another variation on a very common theme with Angular. I have a controller that isn't being picked up and I can't pinpoint what's missing.

Here are the key areas:

My Layout.cshtml page has the following:

        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="http://cdn.date-fns.org/v1.3.0/date_fns.min.js"></script>

        <script src="~/js/utility/utility.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>

        <script src="~/js/app.js"></script>

        <script src="~/js/utility/config.js"></script>

        <!-- models -->
        <script src="~/js/models/game.js"></script>

        <!-- services -->
        <script src="~/js/services/game.js"></script>

        <!-- controllers -->
        <script src="~/js/controllers/home-controller.js"></script>

App.ts looks like this:

/// <reference path="utility/utility.ts" />

var app;
(function () {
    'use strict';

    app = angular.module(Utility.Resources.appName, ['ngRoute'])

})();

My config.ts is set up like this (a few deliberate redundancies in the routes to begin with):

(function () {
    'use strict';

    app.config(function ($routeProvider, $locationProvider) {
        console.info('routes');
        $routeProvider.when(Utility.Urls.game, {
            templateUrl: Utility.Templates.game
        }).when(Utility.Urls.home, {
            templateUrl: Utility.Templates.home
        }).when(Utility.Urls.team, {
            templateUrl: Utility.Templates.team
        }).otherwise({
            redirectTo: Utility.Urls.home
            //templateUrl: Utility.Templates.home
        });

        $locationProvider.html5Mode(true);
    });


    app.run(function ($rootScope, $location) {

        console.info('running'); 

        $rootScope.$on('$routeChangeStart', function (event, nextRoute, currentRoute) {
            console.info("Started");
        });
    });
})();

And the controller in question looks like this:

var Controllers;
(function (Controllers) {
    'use strict';
    var Home = (function () {
        function Home($scope, gameService) {
            $scope.vm = this;
            console.info("In Home Controller");

            $scope.games = [];
            $scope.categories = [];
            $scope.selectedGame = {};

            gameService = gameService;
            $scope.get = function () {
                console.info("Getting");
            };

        }
        Home.$inject = [
            Utility.Angular.$scope, Utility.Services.gameService
        ];
        return Home;
    }());
    Controllers.Home = Home;
})(Controllers || (Controllers = {}));

So far I can't see anything that's obviously missing but when opening the home template...

<div class="row" ng-controller="Controllers.Home">
    <div class="col-md-3">
        <h3>Games</h3>
        <ul class="list-group">
            <li class="list-group-item list-group-item-info" ng-repeat="game in games" id="{{game.Id}}" ng-click="get(game.Id)">
                <div>
                    <p><span class="meta">{{game.Date}}</span> <span class="pull-right"><i class="glyphicon glyphicon-calendar"></i> {{game.Season}}</span></p>
                    <p>{{game.Team.Name}} vs {{game.Opposition}}</p>
                </div>
            </li>
        </ul>
    </div>

... the debugger returns the following error: Argument 'Controllers.Home' is not aNaNunction, got undefined.

So I'm sure I've overlooked something. Perhaps a dependency in my controller or maybe one of the models? Except I'm not seeing any other errors in the debugger that would indicate a problem.

Any ideas?

UPDATE: georgeawg is basically right. The missing part is in my config:

app.config(function ($routeProvider, $locationProvider) {
    console.info('routes');
    $routeProvider.when(Utility.Urls.game, {
        templateUrl: Utility.Templates.game
    }).when(Utility.Urls.home, {
        templateUrl: Utility.Templates.home,
        controller: Controllers.Home // <- here
        ...

Answer 1

Be sure to declare the controller function to the module as a controller type.

app.controller("Controllers.Home", Controllers.Home);

From the Docs:

Error: ng:areq

Bad Argument

Argument 'Controllers.Home' is not a function, got undefined

---

Description

AngularJS often asserts that certain values will be present and truthy using a helper function. If the assertion fails, this error is thrown. To fix this problem, make sure that the value the assertion expects is defined and matches the type mentioned in the error.

-- AngularJS Error Reference -- $compile -- ng:areq