Ember model attributes in modals

This is my problem:

What I'm trying to do is when I click on a model's name, I get a modal window that shows all it's attributes, like so:

However, when I click on another one, it doesn't work, no modals show up, like so:

This is my index.hbs:

<div class="row" style="text-align:center;">
   {{#each model as |event|}} 

    <div class="col-xs-3 col-md-3">
        <div class="centerBlock">
            <a href="#" class="thumbnail" style="height:180px; width:171px;"></a>
        </div>
      <button type="button" class="btn btn-link" data-toggle="modal" data-target="#{{event.name}}">{{event.name}}</button>
    </div>

       <!-- Modal -->
  <div class="modal fade" id="{{event.name}}" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">{{event.name}}</h4>
        </div>

        <div class="modal-body">
          <p>{{event.location}}</p>
          <p>{{event.roomNumber}}</p>
          <p>{{event.eventDay}}</p>
          <p>{{event.eventTime}}</p>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>

      </div>

    </div>

  </div>
  <!-- End Modal-->
  {{/each}}
</div>

And this is my index.js:

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return this.store.findAll('event');

    }


});

I suppose that I'm doing my {{#each}} wrong, but I've spent about an hour on it and I can't figure it out.

Sorry this is such a dumb problem, and thanks for any direction!