AngularJS: route provider doesn't work when on root

Question

I have an AngularJS app that uses $routeProvider and a $stateProvider. I can get all my routes/states to work apart from /.

Here's my app.js file

var MailStash = angular.module("MailStash", ['ui.compat', 'ngResource', 'ngSanitize', 'ui.directives']).
    config(function($stateProvider,   $routeProvider,   $urlRouterProvider) {
        $routeProvider
            .when('/', { controller: ListCtrl, templateUrl: '/js/partials/list.html' });

        $stateProvider
            .state('templates', {
                  url: '/templates',
                  abstract: true,
                  templateUrl: '/js/partials/list.html',
                  controller: ListCtrl,
            })
            .state('templates.list', {
              // parent: 'templates',
              url: '',
              views: {
                'main_content': {
                templateUrl: '/js/partials/templates.new.html',
                controller:CreateCtrl,
                },
              }
            })
            .state('templates.view', {
              parent: 'templates',
              url: '/{templateId}',
              views: {
                'main_content': {
                  templateUrl: '/js/partials/templates.view.html',
                  controller: ViewCtrl,
                },
              },
            })
            .state('templates.new', {
              url: '/new',
              views: {
                'main_content': {
                  templateUrl: '/js/partials/templates.new.html',
                  controller: CreateCtrl,
                },
              },
            })
            .state('templates.edit', {
              parent: 'templates',
              url: '/edit/{templateId}',
              views: {
                'main_content': {
                  templateUrl: '/js/partials/templates.edit.html',
                  controller: EditCtrl,
                },
              },
            })
    }
    )
    .run(
        [        '$rootScope', '$state', '$stateParams',
        function ($rootScope,   $state,   $stateParams) {
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
        }]
    );
...

Nothing happens when I go to / but when I go to /#templates the appropriate views and controllers kick in.

Can anyone see what is wrong with my $routeProvider and why going to / is not doing anything?

Answer 1

Why not simply use $urlRouterProvider and route to / ?

$urlRouterProvider.otherwise('/'); 

Then set a new state for /

$stateProvider.state({
  name: 'home',
  url: '/',
  controller: 'HomeCtrl',
  templateURL: 'home.html'
});

Answer 2

You can specify the default route like this

$routeProvider
        .when('/templates', { controller: ListCtrl, templateUrl: '/js/partials/list.html' })
        .otherwise({ redirectTo: '/templates' });

Hope this will help!