diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 3f3abcdb97..8bae91f3bc 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -2,7 +2,7 @@ import {Component, Template} from 'angular2/angular2';
 import {Ion} from '../ion';
 
 @Component({
-  selector: 'ion-modal'
+  selector: 'ion-modal-wrapper'
 })
 @Template({
   inline: `
@@ -11,7 +11,7 @@ import {Ion} from '../ion';
       <div class="modal-wrapper"><content></content></div>
     </div>`
 })
-export class Modal extends Ion {
+class ModalWrapper extends Ion {
   constructor() {
   }
   show() {
@@ -19,3 +19,19 @@ export class Modal extends Ion {
   hide() {
   }
 }
+
+@Component({
+  selector: 'ion-modal'
+})
+@Template({
+  directives: [ModalWrapper],
+  inline: `
+    <ion-modal-wrapper>
+      <div class="modal">
+        <content></content>
+      </div>
+    </ion-modal-wrapper>`
+})
+export class Modal extends Ion {
+  constructor() {}
+}