UI-Router using routes within a Section of a Site

Question

The site I'm building already has URL's built up using MVC. So for example /Account goes to a page, /Customers goes to a page, and /Quotes goes to a page. On the /Quotes page I have a multi-step wizard which I want to use Ui-Routing on. See my app.js below, this all works.

So my URL becomes /Quotes#newmodel, /Quotes#customer, etc. A different #{value} for each step on the wizard. The problem is that the .otherwise affects all other areas of the site. So if I'm going to /Account, I get the url /Account#wizard. I do not want this to occur anywhere other than on the /Quotes page. Is there anything I can do with the URL matching so I can remove the .otherwise?

'use strict';

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

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/wizard");

    $stateProvider
        .state('wizard', {
            url: '/wizard',
            templateUrl: 'Scripts/templates/wizardLayout.html',
            controller: 'wizardNavigationCtrl'
        })
        .state('wizard.newmodel', {
            url: '/newmodel',
            templateUrl: 'Scripts/templates/wizardModel.html',
            controller: 'wizardModelCtrl'
        })
        .state('wizard.other', {
            url: '/other',
            templateUrl: 'Scripts/templates/wizardOther.html',
            controller: 'wizardOtherCtrl'
        })
        .state('wizard.customer', {
            url: '/customer',
            templateUrl: 'Scripts/templates/wizardCustomer.html',
            controller: 'wizardCustomerCtrl'
        })
        .state('wizard.shipping', {
            url: '/shipping',
            templateUrl: 'Scripts/templates/wizardShipping.html',
            controller: 'wizardShippingCtrl'
        })
        .state('wizard.review', {
            url: '/review',
            templateUrl: 'Scripts/templates/wizardReview.html',
            controller: 'wizardReviewCtrl'
        });
    }]);

I'm also interested in how I can cause the route to load the layout and then by default go to the wizard.newmodel route (though this may be a separate question). Basically the same behavior as if I click on an:

<a sref-ui=".newmodel">

Answer 1

I removed the $urlRouterProvider.otherwise("/wizard") in the app.js. Instead I added a controller to the main /Quote page that redirects the $location.url to '/wizard'. Below is the code.

myApp.controller('wizardCtrl', ['$location', function ($location) {
    $location.url('wizard')
}])