diff --git a/app/pods/protected/compare/controller.js b/app/pods/protected/compare/controller.js
index bc04ca2..0ba05a4 100644
--- a/app/pods/protected/compare/controller.js
+++ b/app/pods/protected/compare/controller.js
@@ -3,9 +3,20 @@ import Ember from 'ember';
 const { Controller } = Ember;
 
 export default Controller.extend({
+  selectedStrains: null,
+  selectedCharacteristics: null,
+
   actions: {
     search: function(query) {
       this.transitionToRoute('protected.compare.results', { queryParams: query });
     },
+
+    updateStrainSelection: function(selection) {
+      this.set('selectedStrains', selection);
+    },
+
+    updateCharacteristicSelection: function(selection) {
+      this.set('selectedCharacteristics', selection);
+    },
   }
 });
diff --git a/app/pods/protected/compare/results/controller.js b/app/pods/protected/compare/results/controller.js
index 391985a..c054c46 100644
--- a/app/pods/protected/compare/results/controller.js
+++ b/app/pods/protected/compare/results/controller.js
@@ -1,31 +1,8 @@
 import Ember from 'ember';
 
-export default Ember.Controller.extend({
+const { Controller } = Ember;
+
+export default Controller.extend({
   queryParams: ['strain_ids', 'characteristic_ids'],
 
-  csvLink: function() {
-    let token = encodeURIComponent(this.get('session.secure.token'));
-    return `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/` +
-      `compare?token=${token}&strain_ids=${this.get('strain_ids')}&` +
-      `characteristic_ids=${this.get('characteristic_ids')}&mimeType=csv`;
-  }.property('strain_ids', 'characteristic_ids').readOnly(),
-
-  strains: function() {
-    let strains = [];
-    let strain_ids = this.get('strain_ids').split(',');
-    strain_ids.forEach((id) => {
-      strains.push(this.store.peekRecord('strain', id));
-    });
-    return strains;
-  }.property('strain_ids'),
-
-  characteristics: function() {
-    let characteristics = [];
-    let characteristic_ids = this.get('characteristic_ids').split(',');
-    characteristic_ids.forEach((id) => {
-      characteristics.push(this.store.peekRecord('characteristic', id));
-    });
-    return characteristics;
-  }.property('characteristic_ids'),
-
 });
diff --git a/app/pods/protected/compare/results/results-table/component.js b/app/pods/protected/compare/results/results-table/component.js
new file mode 100644
index 0000000..87b2369
--- /dev/null
+++ b/app/pods/protected/compare/results/results-table/component.js
@@ -0,0 +1,19 @@
+import Ember from 'ember';
+
+const { Component, computed, inject: { service } } = Ember;
+
+export default Component.extend({
+  session: service(),
+
+  strains: null,
+  characteristics: null,
+  strain_ids: null,
+  characteristic_ids: null,
+
+  csvLink: computed('strain_ids', 'characteristic_ids', function() {
+    const token = encodeURIComponent(this.get('session.data.authenticated.access_token'));
+    return `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/` +
+      `compare?token=${token}&strain_ids=${this.get('strain_ids')}&` +
+      `characteristic_ids=${this.get('characteristic_ids')}&mimeType=csv`;
+  }),
+});
diff --git a/app/pods/protected/compare/results/results-table/template.hbs b/app/pods/protected/compare/results/results-table/template.hbs
new file mode 100644
index 0000000..c90d3bc
--- /dev/null
+++ b/app/pods/protected/compare/results/results-table/template.hbs
@@ -0,0 +1,25 @@
+<table class="flakes-table">
+  <thead>
+    <tr>
+      <th>Characteristic</th>
+      {{#each strains as |strain|}}
+        <th>
+          {{#link-to 'protected.strains.show' strain.id classBinding="data.typeStrain:type-strain"}}
+            {{strain.fullNameMU}}
+          {{/link-to}}
+        </th>
+      {{/each}}
+    </tr>
+  </thead>
+  <tbody>
+    {{#each characteristics as |row|}}
+      <tr>
+        {{#each row key="@index" as |col|}}
+          <td>{{col}}</td>
+        {{/each}}
+      </tr>
+    {{/each}}
+  </tbody>
+</table>
+<hr>
+<a href="{{csvLink}}" download>Download as CSV</a>
diff --git a/app/pods/protected/compare/results/route.js b/app/pods/protected/compare/results/route.js
index 981fa36..5a8ec60 100644
--- a/app/pods/protected/compare/results/route.js
+++ b/app/pods/protected/compare/results/route.js
@@ -1,8 +1,10 @@
 import Ember from 'ember';
 import ajaxRequest from '../../../../utils/ajax-request';
 
-export default Ember.Route.extend({
-  session: Ember.inject.service('session'),
+const { Route, $: { isEmptyObject }, inject: { service } } = Ember;
+
+export default Route.extend({
+  session: service(),
 
   queryParams: {
     strain_ids: {
@@ -15,8 +17,9 @@ export default Ember.Route.extend({
 
   beforeModel: function(transition) {
     this._super(transition);
-    if (Ember.$.isEmptyObject(transition.queryParams.strain_ids) ||
-        Ember.$.isEmptyObject(transition.queryParams.characteristic_ids)) {
+    const strain_ids = transition.queryParams.strain_ids;
+    const characteristic_ids = transition.queryParams.characteristic_ids;
+    if (isEmptyObject(strain_ids) || isEmptyObject(characteristic_ids)) {
       this.transitionTo('protected.compare');
     }
   },
@@ -26,12 +29,12 @@ export default Ember.Route.extend({
       this.transitionTo('protected.compare');
     }
 
-    let compare = this.controllerFor('protected.compare');
+    const compare = this.controllerFor('protected.compare');
     compare.set('selectedStrains', params.strain_ids);
     compare.set('selectedCharacteristics', params.characteristic_ids);
 
-    let url = `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/compare`;
-    let options = {
+    const url = `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/compare`;
+    const options = {
       method: 'GET',
       data: params,
     };
@@ -40,9 +43,26 @@ export default Ember.Route.extend({
 
   setupController: function(controller, model) {
     model.forEach((m, i) => {
-      let c = this.store.peekRecord('characteristic', m[0]);
+      const c = this.store.peekRecord('characteristic', m[0]);
       model[i][0] = c.get('characteristicName');
     });
+
+    const compare = this.controllerFor('protected.compare');
+
+    const strains = [];
+    const strain_ids = compare.get('selectedStrains').split(',');
+    strain_ids.forEach((id) => {
+      strains.push(this.store.peekRecord('strain', id));
+    });
+    controller.set('strains', strains);
+
+    const characteristics = [];
+    const characteristic_ids = compare.get('selectedCharacteristics').split(',');
+    characteristic_ids.forEach((id) => {
+      characteristics.push(this.store.peekRecord('characteristic', id));
+    });
+    controller.set('characteristics', characteristics);
+
     controller.set('model', model);
   },
 
diff --git a/app/pods/protected/compare/results/template.hbs b/app/pods/protected/compare/results/template.hbs
index f40869c..18542e7 100644
--- a/app/pods/protected/compare/results/template.hbs
+++ b/app/pods/protected/compare/results/template.hbs
@@ -1,25 +1,7 @@
-<table class="flakes-table">
-  <thead>
-    <tr>
-      <th>Characteristic</th>
-      {{#each strains as |strain|}}
-        <th>
-          {{#link-to 'protected.strains.show' strain.id classBinding="data.typeStrain:type-strain"}}
-            {{strain.fullNameMU}}
-          {{/link-to}}
-        </th>
-      {{/each}}
-    </tr>
-  </thead>
-  <tbody>
-    {{#each model as |row|}}
-      <tr>
-        {{#each row key="@index" as |col|}}
-          <td>{{col}}</td>
-        {{/each}}
-      </tr>
-    {{/each}}
-  </tbody>
-</table>
-<hr>
-<a href="{{csvLink}}" download>Download as CSV</a>
+{{
+  protected/compare/results/results-table
+  strains=strains
+  characteristics=model
+  strain_ids=strain_ids
+  characteristic_ids=characteristic_ids
+}}
diff --git a/app/pods/protected/compare/select-form/component.js b/app/pods/protected/compare/select-form/component.js
index 34f5bff..db58626 100644
--- a/app/pods/protected/compare/select-form/component.js
+++ b/app/pods/protected/compare/select-form/component.js
@@ -7,10 +7,22 @@ export default Component.extend({
   strains: null,
 
   "on-search": null,
+  "update-strains": null,
+  "update-characteristics": null,
 
   selectedStrains: null,
   selectedCharacteristics: null,
 
+  updateStrains: function(selection) {
+    this.set('selectedStrains', selection);
+    this.attrs['update-strains'](this.get('selectedStrains'));
+  },
+
+  updateCharacteristics: function(selection) {
+    this.set('selectedCharacteristics', selection);
+    this.attrs['update-characteristics'](this.get('selectedCharacteristics'));
+  },
+
   actions: {
     search: function() {
       const query = {
@@ -26,11 +38,11 @@ export default Component.extend({
       strains.forEach((strain) => {
         strain_ids.push(strain.get('id'));
       });
-      this.set('selectedStrains', strain_ids.join(","));
+      this.updateStrains(strain_ids.join(","));
     },
 
     deselectAllStrains: function() {
-      this.set('selectedStrains', '');
+      this.updateStrains("");
     },
 
     selectAllCharacteristics: function() {
@@ -39,11 +51,11 @@ export default Component.extend({
       chars.forEach((char) => {
         char_ids.push(char.get('id'));
       });
-      this.set('selectedCharacteristics', char_ids.join(","));
+      this.updateCharacteristics(char_ids.join(","));
     },
 
     deselectAllCharacteristics: function() {
-      this.set('selectedCharacteristics', '');
+      this.updateCharacteristics("");
     },
   },
 });
diff --git a/app/pods/protected/compare/template.hbs b/app/pods/protected/compare/template.hbs
index 6dc89e8..af8b15a 100644
--- a/app/pods/protected/compare/template.hbs
+++ b/app/pods/protected/compare/template.hbs
@@ -4,7 +4,11 @@
   protected/compare/select-form
   characteristics=characteristics
   strains=strains
+  selectedStrains=selectedStrains
+  selectedCharacteristics=selectedCharacteristics
   on-search=(action "search")
+  update-strains=(action "updateStrainSelection")
+  update-characteristics=(action "updateCharacteristicSelection")
 }}
 
 {{outlet}}