Change only one view on state change in ui.router?

Question

I have a simple layout like so:

__________________  ________
|                |  | Side |
|  Main section  |  | -bar |
|________________|  |______|

The "Main section" exposes forms to the user; based on their selection that "Main section" state should change (i.e.: a different partial should be loaded). How do I facilitate this with UI.router?

E.g.: change only columnOne in the /about state: http://plnkr.co/edit/IzimSVsstarlFviAm7S7

Answer 1

When the state changes, all the new state's views and those of any ancestor state will be loaded. So if you want view A to remain unchanged while view B changes to view C, then view A's state will have to be an ancestor of views B and C. So you need an intermediary (possibly abstract) state.

Here is a Plunker.