Problem with new page #1484

I created a new page (viewParticipant.cshtml), a new controller (viewParticipant.js), and a route for it in app.js

I am able to navigate to my page, the cshtml seems to load, but it does not seem to recognize the controller. In my controller I put a simple alert just to see if it was making it there, it does not.

Here is my controller: (function () { appModule.controller('tenant.views.participants.viewParticipant', [ '$scope', '$uibModal', function ($scope, $uibModal) { var vm = this;

        $scope.$on('$viewContentLoaded', function () {
            App.initAjax();
        });

        //start from here...
        alert("Made it");
    }
]);

})();

in my cshtml file I have: <div ng-controller="tenant.views.participant.viewParticipant as vm"> <div class="row margin-bottom-5"> <div class="col-xs-6"> <div class="page-head"> <div class="page-title"> <h1> <span>PAGE_NAME</span> <small>PAGE_NAME_INFO</small> </h1> </div> </div> </div> <div class="col-xs-6 text-right"> <button class="btn btn-primary blue" @ng-click="vm.doIt1()"@><i class="fa fa-plus"></i> ACTION_ONE</button> <button class="btn btn-primary blue" @ng-click="vm.doIt2()"@><i class="fa fa-plus"></i> ACTION_TWO</button> </div> </div> <div class="portlet light"> <div class="portlet-body"> <p>PAGE_CONTENT_HERE</p> </div> </div> </div>

When I debug the page I see the following error: Error: [ng:areq] <a class="postlink" href="http://errors.angularjs.org/1.5.0/ng/areq?p0=tenant.views.participant.viewParticipant&p1=not%20a%20function%2C%20got%20undefined">http://errors.angularjs.org/1.5.0/ng/ar ... 0undefined</a> at sb (<a class="postlink" href="http://localhost:6240/Scripts/angular.min.js:23:57">http://localhost:6240/Scripts/angular.min.js:23:57</a>) at Sa (<a class="postlink" href="http://localhost:6240/Scripts/angular.min.js:23:150">http://localhost:6240/Scripts/angular.min.js:23:150</a>) at Anonymous function (<a class="postlink" href="http://localhost:6240/Scripts/angular.min.js:86:318">http://localhost:6240/Scripts/angular.min.js:86:318</a>) at A (<a class="postlink" href="http://localhost:6240/Scripts/angular.min.js:64:15">http://localhost:6240/Scripts/angular.min.js:64:15</a>) at u (<a class="postlink" href="http://localhost:6240/Scripts/angular.min.js:65:5">http://localhost:6240/Scripts/angular.min.js:65:5</a>) at g (<a class="postlink" href="http://localhost:6240/Scripts/angular.min.js:57:459">http://localhost:6240/Scripts/angular.min.js:57:459</a>) at Anonymous function (<a class="postlink" href="http://localhost:6240/Scripts/angular.min.js:57:279">http://localhost:6240/Scripts/angular.min.js:57:279</a>) at Anonymous function (<a class="postlink" href="http://localhost:6240/Scripts/angular-ui-router.min.js:7:23887">http://localhost:6240/Scripts/angular-u ... js:7:23887</a>) at ka (<a class="postlink" href="http://localhost:6240/Scripts/angular.min.js:79:16">http://localhost:6240/Scripts/angular.min.js:79:16</a>) at u (<a class="postlink" href="http://localhost:6240/Scripts/angular.min.js:66:319">http://localhost:6240/Scripts/angular.min.js:66:319</a>) <div class="fade-in-up page-content-inner ng-scope" ui-view=""> angular.js (13236,11)

Why is this not working??