AngularJS: On GetJSON complete use the data in other controller - angularjs

Question

I'm newbie in Angular.
// This is my main controller
app.controller('AppCtrl', ['$rootScope', '$scope', 'cfpLoadingBar', '$http',
function ($rootScope, $scope, cfpLoadingBar, $http) {
cfpLoadingBar.start();
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
//stop loading bar on stateChangeSuccess
event.targetScope.$watch("$viewContentLoaded", function () {
// HERE I want to send request to API and on complete do
// 1. Complete loadbar
// 2. Write response to global var and use it from other controller
$http.get(
'/api/',
{}
).then(function (response) {
// Completing loadbar
cfpLoadingBar.complete();
$SOME_GLOBAL_VAR.api = response;
});
});
});
}]);
// Controller 1
app.controller('Ctrl_1', ["$scope", "$http" function ($scope, $http) {
$scope.param = 'get_data_1';
When $SOME_GLOBAL_VAR.api
console.log($SOME_GLOBAL_VAR.api);
}]);
I want to use one api request for different controllers.
So I want to load API, and when it finish - each controller will render his part.
Now I can't understand how to listen to API loading is completed?

Answer 1

You can achieve this in following way
$http.get(
'/api/',
{}
).then(function (response) {
// Completing loadbar
cfpLoadingBar.complete();
$rootScope.$emit("receivedApiUpdate", response);
});
angular.module("my_module")('controller1', ['$rootScope', function($rootScope) {
$rootScope.$on('receivedApiUpdate',function(event, response){
// Do your work
});
}]);
angular.module("my_module")('controller2', ['$rootScope', function($rootScope) {
$rootScope.$on('receivedApiUpdate',function(event, response){
// Do your work
});
}]);
angular.module("my_module")('controller3', ['$rootScope', function($rootScope) {
$rootScope.$on('receivedApiUpdate',function(event, response){
// Do your work
});
}]);

Answer 2

you can try to make a service and use your service across your controllers.
https://docs.angularjs.org/guide/services