diff --git a/demos/toggle/index.ts b/demos/toggle/index.ts
index 405e893db7..d5b8f8cbc1 100644
--- a/demos/toggle/index.ts
+++ b/demos/toggle/index.ts
@@ -3,4 +3,23 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoApp {
+  data;
+
+  constructor() {
+    this.data = {
+      frodo: true,
+      sam: false,
+      eowyn: true,
+      legolas: true,
+      gimli: false,
+      saruman: true,
+      gandalf: true,
+      arwen: false,
+      boromir: false,
+      gollum: true,
+      galadriel: false
+    };
+  }
+
+}
diff --git a/demos/toggle/main.html b/demos/toggle/main.html
index bff709b020..852cdca313 100644
--- a/demos/toggle/main.html
+++ b/demos/toggle/main.html
@@ -7,65 +7,59 @@
 
     <ion-item>
       <ion-label>Frodo Baggins</ion-label>
-      <ion-toggle value="foo" checked="true"></ion-toggle>
+      <ion-toggle [(ngModel)]="data.frodo"></ion-toggle>
     </ion-item>
 
     <ion-item>
       <ion-label>Sam</ion-label>
-      <ion-toggle energized></ion-toggle>
+      <ion-toggle [(ngModel)]="data.sam"></ion-toggle>
     </ion-item>
 
     <ion-item>
-      <ion-label> Éowyn</ion-label>
-      <ion-toggle danger checked="true"></ion-toggle>
+      <ion-label>Éowyn</ion-label>
+      <ion-toggle [(ngModel)]="data.eowyn" danger></ion-toggle>
     </ion-item>
 
     <ion-item>
-      <ion-label>Legolas
-      </ion-label>
-      <ion-toggle royal checked="true"></ion-toggle>
+      <ion-label>Legolas</ion-label>
+      <ion-toggle [(ngModel)]="data.legolas" disabled="true"></ion-toggle>
     </ion-item>
 
     <ion-item>
       <ion-label>Gimli</ion-label>
-      <ion-toggle danger></ion-toggle>
+      <ion-toggle [(ngModel)]="data.gimli" danger></ion-toggle>
     </ion-item>
 
     <ion-item>
       <ion-label>Saruman</ion-label>
-      <ion-toggle dark checked="true"></ion-toggle>
+      <ion-toggle [(ngModel)]="data.saruman" dark></ion-toggle>
     </ion-item>
 
     <ion-item>
       <ion-label>Gandalf</ion-label>
-      <ion-toggle energized checked="true"></ion-toggle>
+      <ion-toggle [(ngModel)]="data.gandalf" secondary></ion-toggle>
     </ion-item>
 
     <ion-item>
       <ion-label>Arwen</ion-label>
-      <ion-toggle royal></ion-toggle>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Treebeard</ion-label>
-      <ion-toggle secondary checked="true"></ion-toggle>
+      <ion-toggle [(ngModel)]="data.arwen" disabled="true"></ion-toggle>
     </ion-item>
 
     <ion-item>
       <ion-label>Boromir</ion-label>
-      <ion-toggle royal></ion-toggle>
+      <ion-toggle [(ngModel)]="data.boromir"></ion-toggle>
     </ion-item>
 
     <ion-item>
       <ion-label>Gollum</ion-label>
-      <ion-toggle dark checked="true"></ion-toggle>
+      <ion-toggle [(ngModel)]="data.gollum" dark></ion-toggle>
     </ion-item>
 
     <ion-item>
       <ion-label>Galadriel</ion-label>
-      <ion-toggle energized></ion-toggle>
+      <ion-toggle [(ngModel)]="data.galadriel" secondary></ion-toggle>
     </ion-item>
 
-
   </ion-list>
+
 </ion-content>