AngularJS $onInit hook executes before parent scope inheritance completes in nested components

Direct Answer

No. AngularJS does not guarantee that $onInit executes only after complete scope inheritance in a nested component tree. $onInit runs after the component controller is instantiated, but AngularJS may still be propagating inherited scope properties to child components at that point.

Confirmed Facts

• The component lifecycle order is template compilation, controller instantiation, $onInit, then child component compilation.
• AngularJS 1.5 introduced the component syntax; directive-based components in earlier versions may initialize differently.
• If a parent loads data asynchronously, the property can be undefined during child $onInit even in shallow trees.

Likely Explanation

AngularJS instantiates controllers top-down as the template compiles. A child component's $onInit can fire before the parent controller finishes assigning inherited values, or before AngularJS finishes linking the child scope to the parent scope. This is a timing race, not a missing scope chain.

Steps for This Case

1. In the child component's $onInit, defer access to inherited parent properties until the next digest cycle using $timeout with no delay, or $scope.$evalAsync.
2. If the parent value arrives asynchronously, replace scope-inheritance dependence with a $watch on the parent property or require the parent controller directly via require: ^parentComponent.
3. Remove the deferred call once the value is confirmed, to avoid unnecessary digest cycles.

angular.module('app').component('child', {
  bindings: { parentValue: '<' },
  require: { parent: '^parentComponent' },
  controller: function($scope, $timeout) {
    this.$onInit = function() {
      // Unsafe: inherited scope property may still be undefined here.
      console.log(this.parentValue);

      // Safer: defer until after current digest cycle.
      var ctrl = this;
      $timeout(function() {
        console.log(ctrl.parentValue);
      });
    };
  }
});

Verification Without Affecting the Live App

1. Add console.log statements in the child $onInit and in a parent $scope.$watch for the inherited property.
2. Run the same page in an isolated test harness that loads AngularJS 1.2, 1.3, or 1.5 without touching production.
3. In a unit test, call $digest to flush pending changes and assert the parent property is defined before the child initialization logic runs.

Missing diagnostic detail: Is the parent property assigned synchronously during the parent controller's construction, or is it resolved asynchronously through an HTTP call or promise? This determines whether a simple $timeout deferral is sufficient or whether you need a watcher or promise-based initialization.