ui-router nested states, changing child state causes parent-defined view to reload

I am using ui-router in my editor project. I have two ui-views, a preview pane and a settings pane.

<div ui-view="preview"></div>
<div ui-view="settings"></div>

I always want the preview view to show templates/preview.html.

By default, I want the settings view to show templates/settings/general.html.

When I click on an item inside of my preview, I want to change the settings view to show templates/settings/item.html without reloading the preview view.

For now my routing code looks like this:

.state('editor.page', {
    url: "/editor/:pageId",
    abstract: true,
    views: {
        'preview': {
            templateUrl: 'templates/preview.html',
            controller: 'PreviewController'
        }
    }
})
.state('editor.page.general', {
    url: "/",
    views: {
        'settings@editor': {
            templateUrl: 'templates/settings/general.html',
            controller: 'GeneralSettingsController'
        }
    }
})
.state('editor.page.item', {
    url: "^/editor/:pageId/:item";
    views: {
        'settings@editor': {
            templateUrl: 'templates/settings/item.html',
            controller: 'ItemSettingsController'
        }
    }
})

Inside my preview.html, each item is a link with a ui-sref like this:

<a ui-sref="editor.page.item({pageId:id, item:$index})">{{item}}</a>

When loading the page, I get the expected behavior: the preview shows the page as expected and templates/settings/general.htm is loaded in the settings view.

However, whenever I click on an item, the settings view is updated as expected, but the preview view is also reloaded, which I don't want. Is there a way to avoid this behavior?