Submitting a form sends blank values to API, why?

After integrating Pods with one of my resource address. All seems well, except when I submit the form (with valid values) in app/checkout/address/new/template.js.

I get POST http://localhost:4099/api/v1/addresses in the console tab in Ember Inspector. The Network tab indicates that it sent blank values to the API.

What am I doing wrong?

// app/checkout/address/new/route.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.createRecord('address');
  }
});

// app/checkout/address/base/controller.js
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save: function() {
      var _this = this;

      // this.store.createRecord('product').save().then(function(product){
      this.get('model').save().then(function(address){
        _this.transitionToRoute('checkout.addresses.index');
      }, function() {
        console.log('error');
        // Need this promise, so we can render errors, if any, in the form
      });

      return false;
    },
    cancel: function() {
      return true;
    }
  }
});

// app/checkout/address/new/controller.js
import AddressBaseController from '../base/controller';

export default AddressBaseController.extend({
  actions: {
    cancel: function() {
      this.store.unloadAll('address');
      this.transitionToRoute('checkout.address.index');

      return false;
    }
  }
});

// app/checkout/address/new/template.js
<h1>Add new address</h1>

<form {{action "save" on="submit"}}>
  <p>
    <label>First name:
      {{input value=firstName}}
    </label>

    {{#each error in errors.firstName}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Last name:
      {{input value=lastName}}
    </label>

    {{#each error in errors.lastName}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Address:
      {{input value=address1 placeholder="Foo Street"}}
    </label>

    {{#each error in errors.address1}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    {{input value=address2 placeholder="Bar"}}

    {{#each error in errors.address2}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>City:
      {{input value=city placeholder="New York"}}
    </label>

    {{#each error in errors.city}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Postal code:
      {{input value=postalCode placeholder="213213"}}
    </label>

    {{#each error in errors.postalCode}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Contact number:
      {{input value=contactNumber placeholder="8888 8888 888"}}
    </label>

    {{#each error in errors.contactNumber}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Instructions (optional):
      {{textarea value=instructions placeholder="Lorem ipsum dolor"}}
    </label>

    {{#each error in errors.instructions}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <input type="submit" value="Next"/>
  <button {{action "cancel"}}>Cancel</button>
</form>

{{outlet}}

You need to add model before your values in the template, otherwise use ObjectController, which isn't recommended since it's going away in Ember 2.0.

<label>
  First name:
  {{input value=model.firstName}}
</label>