Ember.js select view helper selectionBinding not working

This is my first post in stackoverflow so don't be too hard on me if I don't include all the information I should.

So I am starting to use Ember.js to re-work our UI and have been trying to add the select view helpers to an edit page. There are 4 model objects being used on that page that are set on the controller for the edit page in the edit route. The first model (survey) contains the main Survey data. The other 3 models contain the data for the options in the 3 drop-downs on the page. The survey model contains storage for the selected values for each of the 3 selection controls. The problem I have is that when I select a survey to edit from a list page that shows all the surveys, the drop-downs do not show the current value. Then when I select a value and save the changes, the list view shows the selected value as an object instead of the name. E.g. instead of "All". Then when I select the same survey to edit it then shows the correct selected value in the drop-down. So it sort of works but I can't seem to get it to bind on the name so that the correct value is displayed in the list.

I will include as much of the code as I can to show how the data in configured. I am using Ember-Cli and Ember-Data

Here is the edit route

import Ember from 'ember';

export default Ember.Route.extend({

model: function (param) {
var _this = this;
var surveyId = param.id;

return Ember.RSVP.hash({
    survey: _this.store.find('survey', surveyId),
    jobStats: _this.store.find('job-stat'),
    completionStages: _this.store.find('completion-stage'),
    surveyNames: _this.store.find('survey-name')
});
},

  setupController: function (controller, model) {

  controller.set('survey', model.survey);
  controller.set('jobStats', model.jobStats);
  controller.set('completionStages', model.completionStages);
  controller.set('surveyNames', model.surveyNames);

}
});

Here is the survey model

import DS from 'ember-data';

export default DS.Model.extend({

    name: DS.attr(),
    jobStatus: DS.attr(),
    surveyStatus: DS.attr(),
    .....
});

Here is the job-stat model

import DS from 'ember-data';

export default DS.Model.extend({
  name:   DS.attr()
});

Here is part of the handlebars template that shows the select component

<div class="control-group span12">
     <label class="control-label">Job Status:</label>
     {{view "select" class="span3"
            contentBinding="jobStats"
            optionValuePath="content.id"
            optionLabelPath="content.name"
            selectionBinding="survey.jobStatus"
     }}
 </div>

Here is the controller for the edit route just incase the save method has any impact on the problem

import Ember from 'ember';

export default Ember.Controller.extend({

actions: {
   save: function () {
      console.log('edit survey controller: save');
      var survey = this.get('survey');
      survey.save();
      this.transitionToRoute('surveys');
   },
   cancel: function() {
      console.log('edit survey controller: cancel');
      var survey = this.get('survey');
      survey.rollback();
      this.transitionToRoute('surveys');
   },
   reset: function() {
      console.log('edit survey controller: reset');
      var survey = this.get('survey');
      survey.rollback();
   }
   }
});

I was assuming that the name property from the job-stat model would be saved in the jobStatus property of the survey model. The fact that when the edit page is displayed the correct option is not selected. When I select a value and then save, what is displayed in the list is the object . When I then edit the item again the correct option is shown as selected. It seems that I have defined the binding incorrectly but i am not sure how to get it working. I have tried using the binding on the id but that just resulted in the list displaying the id instead of the name.

I am using Pretender to support the API calls and it has test data for all the models. Here is the Survey data and the job-stat data.

var surveys = [
   {
     id: 1,
     name: 'Gas Survey',
     jobStatus: 'Newly Created',
     ....
  }
];


var jobStats = [
  {
   id: 1,
   name: '[all]'
  },
  {
    id: 2,
    name: 'Newly Created'
  },
  {
    id: 3,
    name: 'Make First App'
  },
  {
    id: 4,
    name: 'Gas Waiting First Appointment'
  }
];

Please can anyone help with this. I have searched the internet trying to find a working example that matches my configuration but most of the examples either aren't using ember-data or are using static data defined in the controller.