title: How to access the parent controller from the child routes in Ember JS?
body: <p>I have a main route named <strong>list</strong>.</p>
  
  <pre><code>//items/list/route.js
  setupController(controller, items) { 
      let vegItems = Ember.A([]);
      let nonVegItems = Ember.A([]);
      items.forEach((item) =&gt; {
          if (item.get('category') === "veg") {
              vegItems.pushObject(item);
          }
  
          if (item.get('category') === "non_veg") {
              nonVegItems.pushObject(item);
          }
      })
  
      controller.set('vegItems', vegItems)
      controller.set('nonVegItems', nonVegItems);
  }
  </code></pre>
  
  <p>Now inside the list route, I have the routes named <strong>veg</strong> and <strong>non-veg</strong>. i.e list/veg and list/non-veg. How can I access the controller variables of parent route, i.e <strong>vegItems</strong> and <strong>nonVegItems</strong> from list/route.js to the child route to load the data in list/veg/template.hbs and list/non-veg/template.hbs?</p>