ui-router nested state won't load

Question

This is a pretty standard question, however I can't seem to find a solution in anything online. Below is the router/index.html page I'm using. I'm not getting any errors in the console, however when the url resolves, correctly, to the login page the entire page is blank. Any ideas, looking at the code below, as to what I'm missing?

router

(function(){
    'use strict'

    var app = angular.module('app.core');

    app.config(AppRouter);

    AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];

    function AppRouter($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/login');
        $stateProvider
            .state('main', {
                url: '/main',
                abstract: true,
                resolve:{
                    Config: 'Config',
                    config: function(Config){
                        console.log(Config);
                        return Config;
                    }
                }
            })
            .state('main.login', {
                url: '/login',
                templateUrl: 'app/components/login/login.html',
                controller: 'LoginController',
                controllerAs: 'vm',
                reloadOnSearch: false
            })
    }
})();

index.html

<div class="slide-animation-container">
    <div ui-view id="ng-view" class="slide-animation"></div>
    {{scrollTo}}
</div>

login.html

<div class="container" ui-view>
    <div class="row vertical-center-row">
            <form id="loginForm" class="form-signin" style="max-width:300px;" autocomplete="off" ng-if="attemptLogin">
                <h2 class="form-signin-heading" style="font-size:22px">Please Sign In</h2>
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span></span>
                    <input type="text" class="form-control" id="username" placeholder="User Name" ng-model="user.username" required>
                </div>
            </form>
    </div>
</div>

EDIT

The router above resides in my config.js file for my core module:

core.module.js

(function(){
    'use strict'

    angular.module('app.core', ['angulartics', 'angulartics.google.analytics', 'angulartics.scroll', 'ngRoute', 'ngAnimate', 'ng.deviceDetector', 'ui.router',
                               'ui.bootstrap', 'ngTable', 'ngSanitize', 'ngCsv', 'toastr', 'angular.chosen', 'rzModule', 'publicServices']);
})();

Answer 1

Your otherwise logic changes the url to /login when no states match.

$urlRouterProvider.otherwise('/login');

However, your state definitions do not have a url that matches /login .

Because main.login is a child of main , it inherits the URL from main . Therefore, you should use the full URL for main.login in your otherwise() call.

$urlRouterProvider.otherwise('/main/login');

Answer 2

Your module should have injected ui.router as a dependency ,

 var app = angular.module('app',['ui.router']);

DEMO