ember.js how to popup a modal from a controller - ember.js

Question

I successfully use this code from a route to popup a boostrap model:
this.render("login-modal", {
into: 'application',
outlet: 'modal'
});
I have login template and the actions is handle through a controller. What I want to do is to pop the modal if the login is failed through the controller.
LoginController:
App.LoginController = Ember.Controller.extend({
needs: ['application'],
actions: {
submit: function() {
var username = this.get('username');
var password = this.get('password');
var self = this;
var postData = JSON.stringify({
"username": username,
"password": password
});
self.set('errorMessage', null);
$.ajax({
type: 'POST',
contentType: 'application/json',
url: 'api/auth',
dataType: "json",
data: postData,
success: function(response){
self.set('errorMessage', response.message);
if (response.success) {
self.set('token', response.token);
self.set('loginstatus', 'success');
var appController = self.get('controllers.application');
appController.set('token', response.token);
self.transitionToRoute('/');
}
if (response.message) {
//console.log('login failed');
self.get('login').render("login-modal-failed", {
into: 'application',
outlet: 'modal'
});
}
},
error: function() {
alert("An error occurred while processing JSON file.");
}
});
}
}
this is the failed code:
if (response.message) {
//console.log('login failed');
self.get('login').render("login-modal-failed", {
into: 'application',
outlet: 'modal'
});
}
the error: Uncaught TypeError: Cannot read property 'render' of undefined
The Login template
<script type="text/x-handlebars" data-template-name="login">
<h1>LOGIN</h1>
<p>Please enter login info</p>
<form class="form-inline" role="form" {{action 'submit' on="submit"}}>
<div class="form-group">
{{input type="text" class="form-control" placeholder="Username" value=username}}
</div>
<div class="form-group">
{{input type="password" class="form-control" placeholder="Password" value=password}}
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
{{#if errorMessage}}
<br />
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Wrong username and/or password.
</div>
{{/if}}
</script>
The bootstrap modal component
<script type="text/x-handlebars" data-template-name="components/my-modal">
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
{{yield}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" {{action 'ok'}}>OK</button>
</div>
</div>
</div>
</div>
</script>
The bootstrap modal template based on the component above
<script type="text/x-handlebars" data-template-name="login-modal-failed">
{{#my-modal title='Login Failed' ok='failed'}}
Login failed - wrong username/password!
{{/my-modal}}
</script>