How to use url parameters in angularjs, ui-router and $stateParams

I have followed the instructions from https://github.com/angular-ui/ui-router/wiki/URL-Routing but cannot get this to work properly.

I have the following:

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

application.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/test");

$stateProvider
    .state('index', {
        url: "/test/:param",
        templateUrl: "App/Test.html", 
        controller: function ($scope, $stateParams) {
            alert($stateParams.param);
        }
    });   

$locationProvider.html5Mode(true);
});

Without the /:param this works as you would expect - i.e. the ui-view is correctly populated with Test.html. However, whenever I put the /:param in I get an error. The error is:

GET http://localhost:3880/test/App/Test.html 404 (Not Found)

App is the route of my angular stuff and Test.html should have a path of

http://localhost:3880/App/Test.html 

which it does if not trying /:param. However, when trying /:param you can see that there is an extra /test/ in the path before /App.

Please someone help, as I would like to consume the parameter in the controller once it is correct.