Ember.js: data-binding between controllers

Question

I\'m trying to bind in the ApplicationController to the IndexController. Here is my jsfiddle. To summarize, here is the binding I have in the Application controller

Answer 1

You could also use following syntax to access other controller's properties:

import Ember from 'ember';

export default Ember.Controller.extend({
  index: Ember.inject.controller('index'),
  indexIsClicked: Ember.computed.alias("index.isClicked"),

  isIndexClicked: Ember.observer('index.isClicked', function() {
    alert("its changed to " + this.get("indexIsClicked"));
  })
});

However you need to make Ember initialize this controller first, so you actually need to call some computed property which depends on index (it will lazily initialize it). So, for example in template I use:

Is index clicked: {{indexIsClicked}}

Working demo.