Broadcast different controllers in AngularJS - angularjs

Question

I am developing a permission system for my app using a factory that looks like this:
angular.module('ecosystemServices', [])
.factory('Guard', function($http, $rootScope) {
var permissions = [];
return {
ready: function() {
if (permissions.length == 0) {
$http.get('/api/users/own-permissions')
.success(function(data){
permissions = data.user_permissions;
$rootScope.$broadcast('permissionsReady', 1);
});
} else {
$rootScope.$broadcast('permissionsReady', 1);
}
return true;
}
}
})
I have to wait until the permissions are loaded to start making queries, so I'm performing a broadcast to the controller, that looks something like this:
appControllers.controller('AgencyPanelCtrl', ['$rootScope', '$scope', '$location', '$routeParams', '$http','Guard',
function ($rootScope, $scope, $location, $routeParams, $http, Guard) {
$scope.loading = true;
Guard.ready();
$scope.has_permission = function(permission) {
return Guard.can(permission);
}
$rootScope.$on('permissionsReady', function(event, ready) {
$scope.initialize();
});
$scope.initialize = function() {
console.log("Initialized");
}
}]);
It's working, but if I change the controller and do the same (change the view and change the controller), the broadcast arrives to the old controller.
Does anyone knows why? Or how to fix it?

Answer 1

You are defining your event listener on the $rootScope. As the name would suggest, there is only one $rootScope, and it's at the root of the document.
As such, when your view changes and the old controller is no longer relevant, the $rootScope still has the listener, which still holds a reference to the old controller's $scope through a closure, and hence everything still goes to the old controller.
Instead, you should define the listener on the $scope of the controller:
$scope.$on('permissionsReady', function(event, ready) {
$scope.initialize();
});
This should fix your problem.