Angular UI-Router Best Practices: Share Data Between named views

I'm migrating from angular-route to ui-router and I'm trying to figure out what is the best option for build the following scenario:

I have a generic panel which is composed of two nested elements showed at the same time: A FORM(rendered on the left) and a simple LIST (rendered on the right).

The form is used to edit or even create a new item for the list (this manipulation is made through a service makes ajax calls)

The list shows all items and I can select one of them and click on "edit", after that the item goes to the form and I'll be able to manipulate/update it.

Here is my code:

     .state('mt.demos', {
            abstract: true,
            url: '/demos',
            views : {
                    'container@' : {
                    templateUrl: '....demos.html'
                }
            }
        })

     .state('mt.panel', {
            url: '',
            views: {
                'form@mt.demos': {
                    templateUrl: '...form.html',
                    controller : 'formController',
                    controllerAs : 'vm', 
                },
                'list@mt.demos': {
                    templateUrl: '...list.html',
                    controller : 'listController',
                    controllerAs : 'vm',
                    
                }
            }
        })

So far I ended up with those 2 options:

1. Create a service for the shared data (this seems to be the most acceptable answer due to its Singleton behavior -- but look the NOTE 1 at the end of this post.
2. Create a parent controller so each nested state can access parent properties like the list or the item to be edited. So when I click on "edit item" the listController updates the parent's scope and the formController will be changed with this data.

NOTE 1: Of course to retrieve the list and to update items I already use one service called demoService. This service is used for ajax requests only. So If the best decision is the options 1 showed above, I belive that I should create a new service with a new proposal, right? Or it isn't bad to store some local variable in this same service. This new service will have the list and the item itself, so when I click on edit I will update the service "item" property?

I think you already have an answer of using a service to store your data.

About a new service with new proposal, while I'm not entirely sure what a 'proposal' means, I'm assuming you are referring to a different list with different fields with your current one?

In that case that would depends on how reusable your code is. If your forms are similar enough, or you can generalize it, then it might be fine to share the same service so you don't have to rewrite the functions. The lists and selected items can be stored as different variables in the service.

Or, you can also store them in different service, and write their common functions in another service.