title: Passing object to all components from parent state in UI-Router
body: <p>I revisited AngularJS after a long. Pleased to see they've gone ahead with components. I am trying to make use of components in my project. </p>
  
  <p>I have few child component states that require access to parent component state. Basically an object will be shared across all child states. I am unable to achieve that with components.</p>
  
  <p><a href="https://i.stack.imgur.com/QUldi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QUldi.png" alt="general overview of architecture"></a></p>
  
  <p>Here's how the structure looks like - </p>
  
  <pre><code>  {
      name: 'wizard',
      url: '/wizard',
      component: 'wizard',
      redirectTo: 'wizard.init'
    },
    {
      name: 'wizard.init',
      url: '/init',
      component: 'init'
    },
    {
      name: 'wizard.customize',
      url: '/customize',
      component: 'customize'
    },
    {
      name: 'wizard.finish',
      url: '/finish',
      component: 'finish'
    }
  </code></pre>
  
  <p>There is an object / variable called <code>$ctrl.settings</code> in wizard component which I want to be shared across all it's child states.</p>
  
  <p>I tried doing something like this - </p>
  
  <pre><code>&lt;div ui-view settings="settings"&gt;
  </code></pre>
  
  <p>And accessing them in child components like this - </p>
  
  <pre><code>(function(angular){
    var app = angular.module('app');
  
    app.component('init', {
      templateUrl:'Scripts/dist/views/modules/wizard/init.html',
      controller: WizInit,
      bindings : {
        'settings' : '='
      }
    });
  
    function WizInit(){
      var $ctrl = this;
  
      $ctrl.$onInit = function(){
        console.log("init Start Step");
        console.log($ctrl.WizInit);
        $ctrl.WizInit= "start";
      }        
    }    
  })(window.angular);
  </code></pre>
  
  <p>But I get undefined in every state even though I have assigned it to some value in parent component <code>/wizard</code>.</p>
  
  <p>How can I make it work with components and ui-router? </p>