Angular controller not binding to view
<p>I have an Angular controller defined something like</p>

<p><strong>mainCtrl.js</strong></p>

<pre><code>angular.module("mainCtrl", [])

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

    var vm = this;
    vm.testStr = "If you see this, mainController is active on your page";
    .
    .
    .
</code></pre>

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

<p>A view defined tries to bind the variable <code>testStr</code> as bellow</p>

<p><strong>index.html</strong></p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;base href="/"&gt;

&lt;!-- load angular and angular-route via CDN --&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"&gt;&lt;/script&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body ng-app="userApp" ng-controller="mainController as main"&gt;

&lt;main class="container"&gt;
   &lt;!-- ANGULAR VIEWS --&gt;
   &lt;div&gt;&lt;h3&gt;{{main.testStr}}&lt;/h3&gt;&lt;/div&gt;
   &lt;div ng-view&gt;&lt;/div&gt;
&lt;/main&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

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

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

<p>Thanks in advance, for your help.</p>

<p><strong>Edit</strong></p>

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

<p>The app module,
<strong>app.js</strong></p>

<pre><code>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");

});
</code></pre>

<p>module for routing
<strong>app.route.js</strong></p>

<pre><code>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);

});
</code></pre>