Angularjs UI-router not working and no error message - html

Question

I'm new to angularjs and I'm trying to set up my ui-routes. When I go to the page, I click on the button that sends you to the route and nothing happens (not even an error message). This is what my routing configure looks like ...
var route = angular.module('route', ["ui.router", 'ngResource'])
// configure the routing
route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
// send to profile page
$urlRouterProvider.otherwise("/user_stats");
$stateProvider
// route for personal info
.state('index', {
url: "/user_stats",
templateUrl : "statistics/user_stats.html" ,
controller : 'user_statsController'
})
});
And this is my html file with the button and view
<!-- navigation bar -->
<div class="wrapper" ng-controller="HeaderController" style="margin-top:8px">
<ul class="nav nav-pills">
<li ng-class="{ active: isActive('/user_stats')}"> <a ui-sref="user_stats"><span class="glyphicon glyphicon-eye-open"></span> Statistics</a></li>
</ul>
</div>
<!-- route veiw -->
<div class="container" id="route" style="width:90%">
<div ui-view></div>
</div>
Any ideas? Thanks in advanced

Answer 1

I think the comment //route for personal info looks in an odd position and I also prefer this to declare routes:
$stateProvider.when('/', {
url: "/user_stats",
templateUrl : "statistics/user_stats.html" ,
controller : 'user_statsController'
}).otherwise({ redirectTo: '/' });

Answer 2

You have to do some work on configuration. see the code sample below
route.config(['$routeProvider', '$locationProvider', '$stateProvider', function ($routeProvider, $locationProvider, $stateProvider) {
var home = {
name: 'home',
controller: 'HomeController',
templateUrl: '../shell/home.html',
pageTitle: ''
},
login = {
name: 'login',
controller: 'loginController',
templateUrl: '../../authentication/login.htm',
pageTitle: ''
},
signatories = {
name: 'signatories',
controller: 'SignatoriesCtrl',
templateUrl: '../signature/signatories.htm',
pageTitle: "Signatories"
};
$stateProvider.state(home);
$stateProvider.state(login);
$stateProvider.state(signatories);
$locationProvider.html5Mode(true);
} ]).run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
} ]).controller('RootController', ['$scope', '$route', '$routeParams', '$location', '$state', function ($scope, $route, $routeParams, $location, $state) {
} ]);