Ember Bootstrap Modals

Ember build 1.0.0-rc.1

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script type="text/x-handlebars" data-template-name="application"> 
  <div class="container">
    {{outlet}}
  </div>
  <div id="modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="ariaLabel" aria-hidden="true">
    {{render "modal"}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="modal">
  <div class="modal-header"> 
    <h2>{{title}}</h2> 
  </div>
  <div class="modal-body"> 
    <h4>{{{msg}}}</h4>
  </div>
  <div class="modal-footer">
    <div class="span3 pull-right">
      <button 
        id="modalBtn" data-dismiss="modal" aria-hidden="true" style="vertical-align:bottom"
        {{bindAttr class=":btn :btn-large :btn-block isCorrect:btn-success:btn-danger" }} 
        {{action "callback"}}>
        {{btn}}
      </button>
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="home"> 
  <div class="content">
    <h1>Home</h1>
    <p>isCorrect= {{controllers.modal.isCorrect}} </p>
    <button class="btn" {{action 'toggle'}}>Toggle isCorrect</button>
    <button class="btn" {{action 'showModal'}}>Show Modal</button>
  </div>
</script>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.content {
  border: 1px solid gray;
  margin: 10px;
  padding: 10px;
  width: 300px;
}

JavaScript

App = Ember.Application.create();

App.Router.map(function(){
  this.resource('home');
});

// ROUTES 
App.IndexRoute = Ember.Route.extend({
  redirect: function(){
    this.transitionTo('home');
  }
});

// CONTROLLERS 
App.HomeController = Ember.Controller.extend({
  needs: ['modal'],

  toggle: function(){
    var modCon = this.get('controllers.modal');
    modCon.set('isCorrect', modCon.get('isCorrect') ? false : true );
  },

  showModal: function(){
    var modCon = this.get('controllers.modal');

    if( modCon.get('isCorrect') ){ // some logic
      modCon.setProperties({
        title: 'Correct',
        msg: 'You get points',
        btn: 'Next'
      });
    }
    else{
      modCon.setProperties({
        title: 'Incorrect',
        msg: 'Please try again',
        btn: 'Close'
      });
    }
    $('#modal').modal(); 
  }
});

App.ModalController = Ember.Controller.extend({
  isCorrect: true,
  callback: function(){
     alert('modal controller caught action');
  },
  title: 'modCon title',
  msg: 'modCon msg',
  btn: 'modCon btn'
});