AngularJS : sharing controller between states in angular-ui router - angularjs

Question

I have these router.js inside my ionic app ,
myapp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.myprofile', {
url: "/myprofile",
abstract: true,
views: {
'menuContent': {
controller : "myprofileCtrl",
templateUrl: "templates/myprofile.html"
}
}
})
.state('app.myprofile.info', {
url: "/info",
controller: "profileinfoCtrl",
templateUrl: "templates/profile/info.html"
})
.state('app.myprofile.location', {
url: "/location",
controller: "profilelocationCtrl",
templateUrl: "templates/profile/location.html"
})
$urlRouterProvider.otherwise('/');
});
I need a way to share controller scopes between myprofile state and myprofile.location state and myprofile.info state too .
I am using ionic framework
in myprofileCtrl
myapp.controller("myprofileCtrl",function($scope,Authy ,Auth,$http ,$rootScope){
$scope.view_loading = true;
Authy.can_go().then(function(data){
$scope.profile =data.profile;
});
});
in profilelocationCtrl
myapp.controller("profilelocationCtrl",function($scope,Authy ,Auth,$http ,$rootScope){
console.log($scope.profile);
});
I got undefined in the console

Answer 1

I think the problem is that since $scope.profile is set after an ajax call, when the myprofile.location state is reached initially, then profile variable is still undefined on the parent $scope, what you could do is $watch the profile variable, or better just broadcast an event downwards when you receive it fro the server call using $broadcast.
$broadcast dispatches the event downwards to all child scopes, so you could do:
myapp.controller("myprofileCtrl",function($scope,Authy ,Auth,$http ,$rootScope){
$scope.view_loading = true;
Authy.can_go().then(function(data){
$scope.profile =data.profile;
$scope.$broadcast('profileSet', data.profile);
});
});
and in the myprofile.location` state:
myapp.controller("profilelocationCtrl",function($scope,Authy,Auth,$http,$rootScope){
$scope.$on('profileSet', function(event, data) {
console.log(data);
});
}
});
Have a look at this demo plunk I just made.