not passing correct model

I am currently calling a component within an #each loop in ember. What it should be doing is passing each model to the modal so I can perform an action on that model, what it is doing, is using the same model for all the buttons (it's always the first in the set of each, if that matters). Here is the template for the call and the component template that it is calling.

caller.hbs

<div class="row">
    
        <div class="col-xs-6 col-md-3">
          <div class="thumbnail">
            <img src="" height="242" width="200">
          <div class="caption">
              <h3> </h3>
              <a href="/users/">User Profile</a>
              <br>
              <p></p>
            </div>
          </div>
        </div>
    
    </div>

modal.hbs

<div id="notmyModal" class="modal fade" 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">Client Actions</h4>
      </div>
      <div class="modal-body">
        <p><a href="/vchat" onclick="$('#myModal').modal('hide')">Initiate Video Conference</a></p>
        <h4>Name:  </h4>
        <h4>Gender: </h4>
        <h4>Age: </h4>
        
          <button type="button" class="btn btn-danger" data-dismiss="modal">Remove Client</button>
        
          <button type="button" class="btn btn-danger" data-dismiss="modal">Remove Client</button>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#notmyModal">Actions</button>