Modal not working in Ember.js app

I'm developing my portfolio website and I'm having problems getting a modal to work. I'm first keeping it simple and just coding this feature as if this was plain html5.

This is the code:

<div class="main-information">
    <div class="main">
        <img src="images/profile.JPG"/>
        <div class="info">
          <h2 class="text-primary">FRANCISCO GOITIA</h2>
          <h3 class="text-primary">SOFTWARE DEVELOPER</h3>
        </div>
    </div>
    <div class="links">
        <ul class="list-inline">
            <li>
                <a class="btn" href="#" data-toggle="modal" data-target="#heroku">Heroku</a>
            </li>
            <li>
                <a class="btn" href="http://ift.tt/1B7D4o9" target="_blank">GitHub</a>
            </li>
            <li>
                <a class="btn">Curriculum Vitae</a>
            </li>
        </ul>
    </div>
</div>


<div class="modal fade" id="heroku" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  <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" id=""></h4>
      </div>
      <div class="modal-body">
        <p>
          The following are some applications I have built and deployed to Heroku. The code for this projects, as well as the code for many more projects and massive open online courses I've taken, can be access in my Github repo:
        </p>
        <ul class="list-unstyled">
          {{#each model as |application|}}
            {{heroku-app application=application}}
          {{/each}}
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"></button>
      </div>
    </div>
  </div>
</div>

Bootstrap is working successfully otherwise.

Thanks.