Ui-router nested states, changing the child state causes the parent view to reload

Question

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

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

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

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

When I click an element inside mine preview, I want to change the view settingsto show templates/settings/item.html without reloading the viewpreview .

Now my routing code is as follows:

.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 mine, preview.htmleach element is a link with the ui-sreffollowing:

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

: preview , templates/settings/general.htm settings.

, , settings , , preview , . ?