diff --git a/example/toderp2/index.html b/example/toderp2/index.html
index a0390333c6..a6d8388a1d 100644
--- a/example/toderp2/index.html
+++ b/example/toderp2/index.html
@@ -166,7 +166,11 @@
         </header>
         <main class="content padded has-header">
           <list header="GENERAL">
-            <a class="list-item" href="#" ng-click="logout()">Log out</a>
+            <list-item>Account details <i class="icon-chevron-right"></i></list-item>
+            <list-item>Account details <toggle ng-model="settings.isSmallText"></toggle></i></list-item>
+          </list>
+          <list header="ACCOUNT">
+            <list-item ng-click="logout()">Log out</list-item>
           </list>
         </main>
       </div>
diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js
index 4f7667e635..4e3bd9fe29 100644
--- a/js/ext/angular/src/directive/ionicList.js
+++ b/js/ext/angular/src/directive/ionicList.js
@@ -33,6 +33,7 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
   return {
     restrict: 'E',
     replace: true,
+    transclude: true,
     scope: {
       isEditing: '=',
       items: '=',
@@ -52,6 +53,8 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
         if(attr.animation) {
           $element.addClass(attr.animation);
         }
+
+        $element.append(transclude($scope));
       }
     }
   }
diff --git a/js/ext/angular/src/directive/ionicToggle.js b/js/ext/angular/src/directive/ionicToggle.js
new file mode 100644
index 0000000000..1fc093279c
--- /dev/null
+++ b/js/ext/angular/src/directive/ionicToggle.js
@@ -0,0 +1,35 @@
+angular.module('ionic.ui.content', [])
+
+// The content directive is a core scrollable content area
+// that is part of many View hierarchies
+.directive('toggle', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {},
+    require: '?ngModel',
+    template: '<div class="toggle">' +
+              ' <input type="checkbox">'+
+              ' <div class="track">' +
+              ' <div class="handle"></div>' +
+              '</div>',
+
+    link: function($scope, $element, $attr, ngModel) {
+      var checkbox;
+
+      $scope.toggle = new ionic.views.Toggle({ el: $element[0] });
+
+      if(!ngModel) { return; }
+
+      checkbox = $element.children()[0];
+
+      if(!checkbox) { return; }
+
+      ngModel.$render = function() {
+        checkbox.checked = ngModel.$viewValue;
+      };
+
+
+    }
+  }
+})
diff --git a/js/views/toggleView.js b/js/views/toggleView.js
index 5c3c27c8e0..fab00d6907 100644
--- a/js/views/toggleView.js
+++ b/js/views/toggleView.js
@@ -8,6 +8,7 @@
     this.handle = opts.handle;
     this.openPercent = -1;
 
+    /*
     // remember that this element, and all its children are apart of a component
     // and assign the component instance to each element so the lookups
     // only has to go through this process just once
@@ -16,6 +17,7 @@
     this.track.isComponent = true;
     this.handle.component = this;
     this.handle.isComponent = true;
+    */
   };
 
   ionic.views.Toggle.prototype = {