How to call second controller when first controller has been loaded and rendered in angularjs?

Question

I have a requirement to call another controller after the first one is loaded and rendered. Means I want to call controllers one-by-one, when one controller is successfully loaded and rendered then another controller is initiated.

Answer 1

You need to use $broadcast, using this you can notify the other controller when something changes on your first controller.

Angular provides $broadcast, $on and $emit for this.

answered here

And if above is not fits your requirement you should use AngularJS stateprovider (ui-router and define states and bound your controller.

First call state1 which has controller1, if everything goes fine within that controller call state2 which has controller2

$state.go("state2");

var routerApp = angular.module('module-name', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/state1');

    $stateProvider        

        .state('state1', {
            url: '/state1',
            templateUrl: 'state1.html',
        controller : 'controller1'
        })


        .state('state2', {
            url: '/state2',
            templateUrl: 'state2.html',
        controller : 'controller2'
        })

});

Index.html

<div ui-view></div>

ui-router example here

Controller like

routerApp.controller("controller1", ['$state', function($state){
//after 

$state.go("state2");

}]);