title: In AngularJS, how to run code after all controllers are initialized?
body: <p>I have a single-page AngularJS application composed of multiple modules, whose purpose is to provide the user with a collaborative pad (main widget) and other related widgets (other connected users, pad metadatas, etc.).</p>
  
  <p>I chose to split the application as follow:</p>
  
  <ul>
  <li>1 module hosting a service, responsible for exposing initialization methods for the pad component</li>
  <li>N modules hosting custom directives (and their controller), corresponding to the different widgets in the application</li>
  <li>1 module responsible for gathering parameters and initializing the pad component</li>
  </ul>
  
  <p>Let's simplify this by assuming I have only 1 widget, whose sole goal is to display a status message to the user: "authenticating", "authenticated", "error" or "ready".</p>
  
  <p>I chose to use a subscribe/notify pattern with the service to let the widget be notified of a change in the shared component's state.</p>
  
  <p>The service:</p>
  
  <pre><code>angular.module("app.core").factory("padService", padService);
  function padService() {
      // Callback registration and notification code omitted
      return {
          initialize: function (authToken) { ... },
          onAuthenticated: function (callback) { ... },
          onReady: function (callback) { ... },
          onError: function (callback) { ... }
      };
  }
  </code></pre>
  
  <p>The widget:</p>
  
  <pre><code>angular.module("app.widget").directive("widget", widget);
  function widget() {
      return {
          templateUrl: 'app/widget.html',
          restrict: 'E',
          controller: widgetController
      };
  }
  function widgetController($scope, padService) {
      $scope.message = "authenticating";
      padService.onAuthenticated(function (user) {
          $scope.message = "authenticated";
          // Do other stuff related to user authentication event
      });
      padService.onReady(function (padInstance) {
          $scope.message = "ready";
          // Do other stuff related to pad readiness event
      });
      padService.onError(function (error) {
          $scope.message = "error";
          // Do other stuff related to error event
      });
  }
  </code></pre>
  
  <p>Now the "initializer module", in its simplest form, gathers an authentication token <code>authToken</code> from the URL fragment (similar to OAuth2) and simply calls <code>padService.initialize(authToken);</code>. Note that it could as well be a dedicated authentication popup, that's why it resides in its own module.</p>
  
  <p>My problem is that I don't know where to put that piece of code. All the places I tried resulted in being placed too early in the angular bootstrap process and/or not updating the widget:</p>
  
  <pre><code>angular.module("app.initializer").run(run);
  function run($document, $timeout, tokenService, padService) {
      // This does not work because run() is called before the
      // controllers are initialized (widget does not get notified)
      var authToken = tokenService.getTokenFromUrl();
      padService.initialize(authToken);
  
      $document.ready(function () {
          // This does not work because angular does not detect
          // changes made to the widget controller's $scope
          var authToken = tokenService.getTokenFromUrl();
          padService.initialize(authToken);
  
          // This does not work in firefox for some reason (but
          // does in chrome!)... except if I enter debug mode or
          // set the timeout to a longer value, which makes it
          // either really difficult to diagnostic or ugly as hell
          $timeout(function () {
              var authToken = tokenService.getTokenFromUrl();
              padService.initialize(authToken);
          }, 0);
      });
  }
  </code></pre>