Angular controller not binding to view

I have an Angular controller defined something like

mainCtrl.js

angular.module("mainCtrl", [])

.controller("mainController", function ($rootScope, $location, Auth) {

    var vm = this;
    vm.testStr = "If you see this, mainController is active on your page";
    .
    .
    .

Here Auth is an angular service defined to handle authentication and it doesn't put the testStr variable behind authentication.

A view defined tries to bind the variable testStr as bellow

index.html

<html>
<head>
<base href="/">

<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>

</head>
<body ng-app="userApp" ng-controller="mainController as main">

<main class="container">
   <!-- ANGULAR VIEWS -->
   <div><h3>{{main.testStr}}</h3></div>
   <div ng-view></div>
</main>

</body>
</html>

But when the index is loaded the value of testString doesn't appear on the page. Instead {{main.testStr}} appears.

I am assuming it is not a must to use $scope and couldn't find what I am doing wrong.

Thanks in advance, for your help.

Edit

There are other files involved that I didn't mention here. Now I can see their relevance.

The app module, app.js

angular.module("userApp", ["ngAnimate", "app.routes",
    "authService", "mainCtrl",
    "employeeCtrl", "employeeService"])

// application configuration to integrate token into requests
.config(function ($httpProvider) {

    // attach our auth interceptor to the http requests
    $httpProvider.interceptors.push("AuthInterceptor");

});

module for routing app.route.js

angular.module("app.routes", ["ngRoute"])

.config(function ($routeProvider, $locationProvider) {

    $routeProvider

    // route for the home page
        .when("/", {
            templateUrl: "app/views/pages/home.html"
        })

        // login page
        .when("/login", {
            templateUrl: "app/views/pages/login.html",
            controller: "mainController",
            controllerAs: "login"
        })

        // show all employees
        .when("/employees", {
            templateUrl: "app/views/pages/employees/all.html",
            controller: "employeeController",
            controllerAs: "employee"
        })

        // form to create a new user
        // same view as edit page
        .when("/employees/create", {
            templateUrl: "app/views/pages/employees/single.html",
            controller: "employeeCreateController",
            controllerAs: "employee"
        })

        // page to edit a user
        .when("/employees/:employee_id", {
            templateUrl: "app/views/pages/employees/single.html",
            controller: "employeeEditController",
            controllerAs: "employee"
        });

    $locationProvider.html5Mode(true);

});

Solution

You have declared the Module name as mainCtrl

angular.module("mainCtrl", [])

but using ng-app as userApp

Change your module like this,

angular.module("userApp", [])