Wait for a controller to run all of its code

Question

I want to know if there is a way that lets say controller 2 waits for controller 2 to finish running all of its code. Im making mobile app, when a user logs in, the app goes to the home page which has a tabbar that loads 4 controllers, but they are loading all at the same time, controller 1 loads a part, then controller 2 shows up loading more, problem is that I am making HTTP request to get data and fill the HTML with the data.

aldro_app.controller('ctrTabBarOpciones', function($scope, compartidosFactory, $http, $rootScope){

console.log('controller tabbar');

$scope.comprobarTab = function (tab) {
    compartidosFactory.tab = tab;
}

    var id = parseInt(getVariable("idcontrato"));
    var url = "http://api/info";
    $http({
    url : url,
    method: "POST",
    data: {id_contrato: id},
    headers:{
     "Content-Type":"application/json;charset=utf-8",
     "Authorization": "Bearer " + getVariable("token")
    }
    })
    .then(function(response){
    console.log("Facturas del contrato -> " + id + "son: " + response.data);
    setVariable("facturas" , JSON.stringify(response.data));
    })
  });

this is the first controller that loads (I know it because on the console the first thing to show is "controller tabbar"), and I am saving the data I am getting on localStorage with the setVariable function, problem comes here.

aldro_app.controller('ctrInicio', function ($scope,$http, $rootScope) {
     /* Http para retirar las ultimas facturas del contrato */
     console.log("Inicio controller");
     //console.log(x.facturas.length);
           var objeto = getVariable("facturas");
           deleteVariable("facturas");
           var listado_facturas = JSON.parse(objeto);
           var arr_length = listado_facturas.facturas.length;
      });

I am getting error of Cannot read property 'facturas' of undefined because my ctrTabbarOpciones loads at first but then my ctrInicio shows up running his code that needs the code which has not been executed yet in ctrTabbarOpciones so, how to tell my controller to wait for the other controller? (Sorry for grammar mistakes).

Answer 1

You can broadcast an event from first controller and listen to it on second controller. 3

aldro_app.controller('ctrTabBarOpciones', function($scope, compartidosFactory, $http, $rootScope){

console.log('controller tabbar');

$scope.comprobarTab = function (tab) {
    compartidosFactory.tab = tab;
}

    var id = parseInt(getVariable("idcontrato"));
    var url = "http://api/info";
    $http({
    url : url,
    method: "POST",
    data: {id_contrato: id},
    headers:{
     "Content-Type":"application/json;charset=utf-8",
     "Authorization": "Bearer " + getVariable("token")
    }
    })
    .then(function(response){
    console.log("Facturas del contrato -> " + id + "son: " + response.data);
    setVariable("facturas" , JSON.stringify(response.data));
        $rootScope.$broadcast('received data'); // broadcast event
    })
  });

aldro_app.controller('ctrInicio', function ($scope,$http, $rootScope) {
     /* Http para retirar las ultimas facturas del contrato */
     console.log("Inicio controller");
     //console.log(x.facturas.length);
     $rootScope.$on('receivedData', function(){
      var objeto = getVariable("facturas");
           deleteVariable("facturas");
           var listado_facturas = JSON.parse(objeto);
           var arr_length = listado_facturas.facturas.length;
     })
          
      });