How to bind Route Property to Controller so that route property changes will reflect in controller

Changing isOpen property in route should reflect it in my component. How can we accomplish this ?.

Ember-Twiddle

routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({
  isOpen:true,
  setupController(controller,model){
    this._super(...arguments);
    controller.set('isOpen',this.get('isOpen')); //whenever i set route property, will this update controller?
    console.log('setupController');
  },
  actions:{
    toggleOpen(){
      console.log('before toggle - ',this.get('isOpen'));
      this.toggleProperty('isOpen'); //changing this route property is not reflected in controller.
      //this.controller.toggleProperty('isOpen'); //changing controller is reflecting.
      console.log('after toggle - ',this.get('isOpen'));
    }
  }
});

controllers/application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates/application.hbs

<h1>Welcome to </h1>
<br>


<br>

<br>
<br>

templates/components/my-component.hbs

my-component 
<button > Toggle </button>

components/my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions:{
    toggleOpen(){
      this.sendAction('toggleOpen');
    }
  }
});