Same object in component and yield block

So I am following the instruction on http://ift.tt/1neM9CH to create a reusable modal. I am trying to make an extensible modal that will be used for simple editing in various places around a gui.

In application.js I have

showModal: function(name, model) {
  this.render(name, {
    into: 'application',
    outlet: 'modal',
    model: model
  });
}

In a template I call this action from a link passing in a contact:

<a class="contact-edit" >Edit contact</a>

contact-edit.hbs:

  <input type="text" name="phone" value="">

my-modal.hbs:

<div class="modal-body">
  
</div>

my-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    save: function () {
      this.$('.modal').modal('hide');
      this.sendAction('save', this.get('objectEditing'));
    },
  },
  show: function () {
    this.$('.modal').modal().on('hidden.bs.modal', function () {
      this.sendAction('close');
    }.bind(this));
  }.on('didInsertElement')
});

The problem is edits to theObject in the line <input type="text" name="phone" value=""> are not showing up in the action being called here (which is on the route). What am I doing wrong?