title: AngularJS +1.5 How can a Parent controller pass data to a component Controller
body: <p>I have a component like:</p>
  
  <p><a href="http://plnkr.co/edit/XGJA1NPlUV6etLTYcsQE" rel="nofollow">Check Plunkr Example</a>   ( Updated and Working with the solution :) Thanks ) </p>
  
  <p>my-component.js declaration</p>
  
  <pre><code> (function() {
    'use strict';
    angular
      .module('app')
      .component("myComponent", {
        bindings: { obj: "=" },
        controller: "ComponentController",
        controllerAs: "vm",
        template: 
          '&lt;section class="result"&gt;&lt;h2&gt;{{vm.title}}&lt;/2&gt;' + 
          '&lt;h3&gt;Using the Parent Controller values&lt;/h3&gt;' +
          '&lt;ul&gt;&lt;li&gt;{{ vm.obj.a }}&lt;/li&gt;&lt;li&gt;{{vm.obj.b}}&lt;/li&gt;&lt;/ul&gt;' +
          '&lt;h3&gt;Using the Children controller values:'+
          '&lt;ul class="component-controller"&gt;&lt;li&gt;{{ vm.copiedObj.a }}&lt;/li&gt;&lt;li&gt;{{vm.copiedObj.b}}&lt;/li&gt;&lt;/ul&gt;' +
          '&lt;/section&gt;'
      });
  
    })();
  </code></pre>
  
  <p>my-component controller</p>
  
  <pre><code> (function() {
    'use strict';
    angular
      .module('app')
      .controller('ComponentController', ComponentController);
  
    function ComponentController() {
      var vm = this;
  
      vm.title = "I'm the Children controller"
  
      vm.copiedObj = vm.obj;   // This should store the myObj variable located in the MainController
    }
  
    })();
  </code></pre>
  
  <p>and a Parent Controller </p>
  
  <pre><code>(function() {
    'use strict';
    angular
      .module('app', []);
  })();
  
  
  // app.controller.js
  // ///////////////////
  (function() {
    'use strict';
    angular
      .module('app')
      .controller('MainController', MainController);
  
    function MainController() {
      var vm = this;
  
      vm.title = "I'm the Parent controller";
  
      vm.myObj = {
        a: "I'm the first value",
        b: "I'm the second value"
      };
  
    }
    })();
  </code></pre>
  
  <p>So if i have a template like</p>
  
  <pre><code>  &lt;body ng-controller="MainController as vm"&gt;
  
      &lt;h2&gt;{{vm.title}}&lt;/h2&gt;
  
      &lt;my-component obj="vm.myObj"&gt;&lt;/my-component&gt; 
  
    &lt;/body&gt;
  </code></pre>
  
  <p>The important line is where i have obj="vm.myObj"  right ?
  I have something wrong because isn't even taking the vm.title :S</p>
  
  <p>I don't want just to print the vm.myObj values into the component,
  i want the vm.obj.value from the ParentController to be accessible &amp; stored in the ComponentController.</p>