html5history $locationProvider not working with $stateProvider

In my app I've tried to set this up correctly per every blog post I've seen talking about it but I can't get the app to load at the / url. I built the app with yeoman's angular generator so it uses grunt to spin up a connect server. But going to localhost:9000 doesn't show the app anymore since trying to add $locationProvider and set the html5location to true.

angular.module('bidrAdminApp', ['sky','ui.router','ngSanitize'])
  .config(function ($stateProvider,$urlRouterProvider,$locationProvider) {
  $stateProvider
    .state('Home',{
      url: '',
      templateUrl: 'views/index.html',
      controller: 'ApplicationCtrl'
    })
    .state('Home.Events', {
      url: '/events',
      templateUrl: 'views/events/index.html',
      controller: 'EventsCtrl'
    })
    .state('Home.Event',{
      url: '/events/{eventId}',
      templateUrl: 'views/events/event/index.html',
      controller: 'EventCtrl'
    })
    .state('Home.Event.Overview',{
      parent: 'Home.Event',
      url: '/overview',
      templateUrl: 'views/events/event/overview.html',
    })
    .state('Home.Event.Settings',{
      parent: 'Home.Event',
      url: '/',
      templateUrl: 'views/events/event/settings.html',
    });
    $urlRouterProvider.otherwise('');
    $locationProvider.html5Mode(true);
});

I have the <base href="/" /> in my head of the base index.html file as well.

If I change the Home state to url: '/admin' it works going to /admin but this isn't the desired outcome. Not sure if I'm missing a configuration.

Change this line:

$urlRouterProvider.otherwise('');

to this line:

$urlRouterProvider.otherwise('/');