Ember cannot display belongsTo value in template

I have 2 models set up with a one to one relationship.

models/character.js:

export default DS.Model.extend(Validations, {
    name: DS.attr('string');
    weapons: DS.belongsTo('weapon', {async:true}).
});

models/weapon.js

 export default DS.Model.extend(Validations, {
     weapon: DS.attr('string'),
     character: DS.belongsTo('character',  {async: true}),
 });

I create a newCharacter record, and set the weapon property in my controller like so:

let weaponChoice = this.get('weaponSelected');

    //find weapon based on weapon name
    let weaponPromise = this.store.query('weapon', {
        filter: {
            weapon: weaponChoice
        }
    }).then( (items) => {
        //set the weapon record here
        newCharacter.set('weapon', items.get('firstObject'));
        newCharacter.save();
    });

Then on a different page I try to display the weapon in my template like this:

When this displays It shows as:

<(unknown):ember300>

When I look at the ember tab in my console this makes sense because this is what it shows. However, when I look at my DB it shows that the weapon column has the id to reference the correct weapon.

The weapon is getting saved in my DB, but I cant seem to be able to properly access it when I want to display it on the page. How can I get access to it? Even when I give access to the weapon model in my route it still displays the same thing. Can anybody enlighten me as to what I am doing wrong?

Here is my route currently for reference:

export default Route.extend({
    model: function (params) {
        return this.store.findRecord('character', params.character_id);
    }
});