Select Box Weirdness

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  actions: {
    selectGenre(genre) {
      this.set('model.franchise.genre', genre);
    }
  },
});

application.template.hbs

<div class="form-group">
  Genre:
  <select onchange={{action 'selectGenre' value='target.value'}} class="form-control">
    <option value=""></option>
    {{#each model.genres as |genre|}}
      <option value={{genre}} selected={{eq genre selectedGenre}}>{{genre.name}}</option>
    {{/each}}
  </select>
</div>

models.franchise.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  synopsis: DS.attr('string'),
  genre: DS.belongsTo('genre'),
  published: DS.attr('string', {
    defaultValue: 'unpublished'
  })
});

models.genre.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  franchises: DS.hasMany('franchise')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({
      franchise: this.store.createRecord('franchise'),
      genres: this.store.findAll('genre')
    });
  },
  actions: {
    saveFranchise(franchise) {
      franchise.save().then(() => {
        this.transitionTo('franchises');
      }).catch(() => {
        alert("couldn't save franchise.");
      });
    }
  }
});

twiddle.json

{
  "version": "0.4.13",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}