Multipage SPAs with AngularJS & Rails using ui-router

I have a Rails application in which I am trying to replace some views with AngularJS, but not all. In each view I replace, I want it to basically act as if it is it's own SPA. I am also trying to use ui-router to manage states within each of these SPAs.

For example, I have a Rails route that maps to a view ".../checkout/1. This triggers a Rails view in which I load the initial SPA for the flow and then let angular take over. I would like to setup ui-router states that are just specific to this checkout flow.

Where I am getting stuck is how to have states that are only specific for that flow with that base url. If I setup the states:

$stateProvider
    .state('start', {
        url: "/",
        templateUrl: "..."
    })
    .state('route2', {
        url: "/route2",
        templateUrl: "..."
    })
    .state('route3', {
        url: "/route3",
        templateUrl: "..."
    });

This works and for .../checkout/1#/, .../checkout/1#/route2, .../checkout/1#/route3.

However, it also work in my other SPA views which I do not want. So, if I do another rails view that uses another SPA, e.g. .../item/1 then the above route will also work for .../item/1#/ and .../item/1#/route2, etc.

Instead, I would like each to be it's own SPA and not conflict with each other. I am not sure how to do this. Can ui-router be somehow namespaced using the base url or can I have independent SPAs that have different stateProviders? Any thoughts on how I should go about this?

Thanks