Dot "modal" function is not available for the element selected / Ember / Bootstrap

I'm using Ember-CLI 0.2.7, I use ember-bootstrap in my project: http://ift.tt/1Glf9DW

My application.hbs:

<h2 id="title">Welcome to Ember.js</h2>
{{view "inactivityWarning"}}
{{outlet}}

I have a route named: login. My login.hbs:

<h2>Login</h2>
<button class="btn btn-lg btn-primary" {{action "showModal"}}>
  <span class="glyphicon glyphicon-cog"></span> Log Me In!
</button>

My login controller:

import Ember from 'ember';
export default Ember.Controller.extend({
  actions: {
    showModal: function() {
      console.log($("#myModal"));
      console.log($("#myModal").element);
      $("#myModal").modal('show');
    }
  }
});

My inactivityWarning view:

import Ember from 'ember';
export default Ember.View.extend({
  templateName: 'views/inactivity-warning'
});

My inactivityWarning template:

<div id="myModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Confirmation</h4>
        </div>
        <div class="modal-body">
            <p>Do you want to save changes you made to document before closing?</p>
            <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

I clicked the button, error: Uncaught TypeError: $(...).modal is not a function

I checked the console, and inspect the object printed by console.log($("#myModal"));, I couldn't find the 'modal' function there:

I compared it with the example code (non-ember, plain html+js) I copied from http://ift.tt/V4iXUq , and I can see 'modal' in the list of fuctions it owns by the selected element.

I don't understand, why the difference? I checked the .bower.json under bower_components/boostrap/ in my ember project, I could see it is version 3.3.4, just like the one used by the example in tutorialrepublic.

Is ember-bootstrap using a 'modified' version of bootstrap 3.3.4 (taking out some functions that maybe is not supported yet, such as dot modal) ?

What if I just forget ember-bootstrap, and use bootstrap directly in my ember (I don't need the emberish bootstrap component for now). How to do that?

Thanks, Raka