diff --git a/app/components/x-toggle.js b/app/components/x-toggle.js
index bd232a0..1fb5d26 100644
--- a/app/components/x-toggle.js
+++ b/app/components/x-toggle.js
@@ -43,8 +43,10 @@ export default Ember.Component.extend({
 
   wasToggled: on('init', observer('toggled', function () {
     var toggled = this.get('toggled');
-    var offState = this.get('off').substr(this.get('off').indexOf(':') + 1) || false;
-    var onState = this.get('on').substr(this.get('on').indexOf(':') + 1) || true;
+    var offIndex = this.get('off').indexOf(':');
+    var onIndex = this.get('on').indexOf(':');
+    var offState = offIndex > -1 ? this.get('off').substr(offIndex + 1) : false;
+    var onState = onIndex > -1 ? this.get('on').substr(onIndex + 1) : true;
 
     this.sendAction('toggle', toggled);
 
@@ -58,8 +60,10 @@ export default Ember.Component.extend({
   valueObserver: on('init', observer('value', function() {
 	  Ember.run.debounce(this, function () {
       var value = this.get('value');
-      var offState = this.get('off').substr(this.get('off').indexOf(':') + 1) || false;
-      var onState = this.get('on').substr(this.get('on').indexOf(':') + 1) || true;
+      var offIndex = this.get('off').indexOf(':');
+      var onIndex = this.get('on').indexOf(':');
+      var offState = offIndex > -1 ? this.get('off').substr(offIndex + 1) : false;
+      var onState = onIndex > -1 ? this.get('on').substr(onIndex + 1) : true;
 
       if (value === onState) {
         this.set('toggled', true);
diff --git a/tests/unit/components/x-toggle-test.js b/tests/unit/components/x-toggle-test.js
index a7b5435..cadde30 100644
--- a/tests/unit/components/x-toggle-test.js
+++ b/tests/unit/components/x-toggle-test.js
@@ -2,6 +2,7 @@ import {
   moduleForComponent,
   test
 } from 'ember-qunit';
+import Ember from 'ember';
 
 moduleForComponent('x-toggle', {
   // specify the other units that are required for this test
@@ -19,3 +20,23 @@ test('it renders', function(assert) {
   this.render();
   assert.equal(component._state, 'inDOM');
 });
+
+test('changing value changes state', function (assert) {
+  assert.expect(3);
+
+  var component = this.subject();
+
+  assert.equal(this.$('input.x-toggle').attr('checked'), false, 'unchecked by default');
+
+  Ember.run(function () {
+    component.set('value', true);
+  });
+
+  assert.equal(this.$('input.x-toggle').attr('checked'), true, 'checked when value: true');
+
+  Ember.run(function () {
+    component.set('value', false);
+  });
+
+  assert.equal(this.$('input.x-toggle').attr('checked'), false, 'unchecked when value: false');
+});