How do I architect an angular app to share data between controllers?

I have a web app where user can create events and drop pins on a map, he/she can also browse events by a list of filters. The map is provided by Google Maps. Thus the app contains 3 major components: the filter lists, new event form, map.

I am thinking how I should architect this using AngularJS. Below is what I am trying and what problem I am bumping into.

I created a controller for the event form, representing an instance of "new event" which is the newest event that the user created. After the user has successfully submitted the form and everything is validated, the user can then click on the map to drop a pin. When the user clicks on the pin it will show the info of the event as was in the form. Now the drop pin and pin info functions are all handled by Google's API, which is separated from the controller. However the functions need to access the data of the new event, which means I have to give it access to the scope of the controller.

I can provide access to the scope but my gut tells me giving access to outside function is not the right thing to do. So what is a better way to architect this? Or I may be wrong that giving scope access is completely legit, if so can someone provide me some insight on the underlying reasons?

For anyone interested in the same topic, after some research I think I have found out the right solution. The answer is not providing scope access outside of controller (I assume that's bad), but to create a service which holds the common data. Controllers who need access to the data can require this service and access them.

So in my particular case, I need to make another controller for the Google Map wrapper which will initialize the map using Google's API, and handles all the map functions. I then created a newEvent service which holds data from the event form, and is required by both the event controller and map controller. The event controller will write data into the service while the map controller, at the appropriate time, retrieve data from it.

But then I figured there is too much code in my map controller, it needs to initialize a lot of map options, implement some utility callbacks for the map object and register them with Google's API. Thus I took a step further to factor all those function into yet another service. The map controller will instead require the map service to deal with Google's API, and subsequently the map service will require the event service to retrieve event data.

So now my app looks like this:

newEventCtrl --- requires ---> eventService <------
                                                  |
mapCtrl --- requires ---> mapService ---requires---

Below are two articles where I found pretty helpful:

Problem

My only problem now is that I need to bind my form fields directly to the data in the event service, through the newEventCtrl, and I don't quite like it because then I need to expose my service data.

controllers.js:

var newEventCtrl = function($scope, eventService) {
    $scope.newEvent = eventService;
    ...
}

services.js:

...
module.service('eventService', function() {
    ...
    return {
        eventName: '',
        ...
        }
});
...

HTML:

...
<input ng-model='newEvent.eventName'>
...

I don't like directly exposing the service data, instead I would like to have a nice API, but I did not find a way to bind the API functions to the input fields so they update automatically. Any suggestion is welcome.