angular-ui-router template and controller not loading

I'm trying to convert my app to use angular-ui-router but I'm unable to get templates/controllers to load. I wanted to have each route defined in each module rather than on the app/index.js file. I have configured the app to default to the login page, which will correctly change the url to /login when an incorrect url is provided. However, the login template and controller are not loaded and when I refresh the page I see Cannot GET /login. I don't see what's wrong with my code:

app/index.js

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

$urlRouterProvider.otherwise('/login');

app/index.html

<!-- content -->
<div id="main" ui-view></div>

app/login/login.routes.js

(function(){
'use strict';

angular.module('loginModule')
.config(function($stateProvider) {
    $stateProvider.state('login', 
    {
        abstract: true,
        url: '/login',
        templateUrl: 'app/login/login.html',
        controller: 'loginController',
        controllerAs: 'vm'
    });
});

})();

app/login/login.controller.js

(function(){
'use strict';

angular.module('loginModule')
.controller('loginController', login);
...

app/login/login.html

<div id="login-content" class="col-md-8" ui-view>
...