Passing data among controllers - angularjs

Question

In my AngularJS I have two controllers. One is responsible for handling data about people. The other controller is used to handle information about how the person data is displayed:
.controller('PersonCtrl', ['$rootScope', '$scope', function ($rootscope, $scope)
{
$scope.Persons = ['John', 'Mike'];
} ]);
.controller('WidgetCtrl', ['$scope',
function($scope) {
$scope.myWidgets = {
'1': {
id: '1',
name: 'Home',
widgets: [{
col: 0,
row: 0,
sizeY: 1,
sizeX: 1,
name: "John"
}, {
col: 2,
row: 1,
sizeY: 1,
sizeX: 1,
name: "Mike"
}]
}
};
Notice in the PersonCtrl, I have two names: John and Mike. In the WidgetCtrl, I want to attach those names to the name field (in the example below, I just typed it in so that it's obvious where the data goes). How do I do this?

Answer 1

just to elaborate the comment... you can use services to share data between controllers. check out this video from egghead.io
egghead.io is an excellent resource for starting with angualrjs.
this is how that service should look like
app.service('productService', function() {
var personList = [];
var add = function(newObj) {
personList.push(newObj);
}
var get = function(){
return personList;
}
return {
add: add,
get: get
};
});
EDIT
to address your comment on how to get names in widget
controller('WidgetCtrl', ['$scope', 'PersonService'
function($scope, personService ) {
/* init the myWidgets*/
var count = 0;
angular.forEach(personService.personList, function(item){
$scope.myWidgets['1'].widgets[count].name = item.name;
count = count +1;
});
}]);

Answer 2

A controller is for mediation between a model (in its $scope) and the template. Sometimes nested controllers is the right way to do things, i.e. your WidgetCtrl assumes that it is inside a PersonCtrl. In this case it can access the parent controller scope members through the scope prototypical inheritance.
A more sophisticated way of doing it though is to use a service that deals with fetching data from a back end and presenting it to various controllers that may need it.

Answer 3

There are a few ways to share data between controllers - events, services and controller inheritance through the use of parent controllers.
There is no right or wrong way, but typically if you are fetching data from a server then a service is the way forward. If you wanna utilize the observer pattern aka pub/sub then use events. We use multiple solutions in our spa.
This however looks like the job for a service - especially since you say one is responsible for showing data - aka the truth - aka a controller (widget). The other is responsible for handling data about a person - use a service which returns the array you need.
Service example:
.factory('persons', function() {
var persons = ['john', 'mike'];
function getPersons() {
return persons;
}
return {
getPersons: getPersons
}
});
Some ex HTML for the update:
<button ng-click="updateWidget(getPeople())">Update Widget</button>
Your Controller:
.controller('WidgetCtrl', ['$scope', 'persons'
function($scope, persons) {
//Both not used only for example purposes...
var peeps = [];
peeps = $scope.getPeople();
//Now in yer HTM you can pass this function into the updateWidget fct
// ex <button ng-click="updateWidget(getPeople())">Update Widget</button>
$scope.getPeople = function() {
// Now this is not async but be away in the future if you req from server you need to use promises
return persons.getPersons();
}
$scope.updateWidget = function(people) {
var item = $scope.myWidgets[1].widgets;
angular.forEach(items, function(item, $index) {
item.name = people[$index];
});
}
$scope.myWidgets = {
'1': {
id: '1',
name: 'Home',
widgets: [{
col: 0,
row: 0,
sizeY: 1,
sizeX: 1,
name: "X"
}, {
col: 2,
row: 1,
sizeY: 1,
sizeX: 1,
name: "Y"
}]
}
};