Accessing parameters in parent state - angularjs

Question

I have the following setup in my AngularJS app:
.state('people.view',
{
abstract: true,
parent: 'people',
views: {
'header#maincontent': {
templateUrl: 'partials/people/_header_view.html'
},
'footer#maincontent': {
templateUrl: 'partials/people/_footer_view.html'
}
}
})
.state('people.details',
{
parent: 'people.view',
url: '/:personId/details',
views: {
'content#maincontent': {
templateUrl: 'partials/people/details.html',
controller: 'PeopleDetailCtrl'
}
}
})
.state('people.addressbook',
{
parent: 'people.view',
url: '/:personId/addressbook',
views: {
'content#maincontent': {
templateUrl: 'partials/people/addressbook.html',
controller: 'PeopleAddressBookCtrl'
}
}
})
So I have a Detail and an Address Book view that are children of a Person View state that has a header and footer (that don't change).
But because the personId is only passed in the child states and only they have a controller specified, then it means I can't access the person information.
For example in the header I want to show the person name.
How can I do this?
Based on the answer below from #mohamedrias I have tried:
.controller('PeopleDetailCtrl', ['$scope', '$rootScope', '$stateParams', 'Person',
function($scope, $rootScope, $stateParams, Person) {
$scope.person = Person.get({personId: $stateParams.personId}, function(person) {
console.log(person);
$rootScope.person.firstname = person.firstname;
$rootScope.person.lastname = person.lastname;
});
}]);
So that I can access {{person.firstname}} in the header, but I get the error:
TypeError: Cannot set property 'firstname' of undefined
The console shows:
Resource {firstname: "Cameron", lastname: "Drysdale", $promise: Object, $resolved: true, $get: function…}

Answer 1

In your child controller, emit the event along with personId.
$scope.$emit('personId', personId);
In your parent controller:
$scope.$on('personId', function(event, personId) {
// check for personId and process the information
});
The above is nice way of doing it.
Else you can do in normal way too, but it's not recommended.
Inject $rootScope in your child controller:
app.controller("ChildController", function($scope, $rootScope, $routeParams) {
$rootScope.personId = $routeParams.personId;
});
In your template header, you can just refer to personId and it will pick the value from $rootScope.
Update based on your code:
$rootScope.person = $rootScope.person || {};
$rootScope.person.firstname = person.firstname;
This is just to make sure that $rootScope.person is available.