diff --git a/angular-query-builder.js b/angular-query-builder.js
index 8c5e2cc..889cf70 100644
--- a/angular-query-builder.js
+++ b/angular-query-builder.js
@@ -31,7 +31,7 @@ app.controller('QueryBuilderCtrl', ['$scope', function ($scope) {
 var queryBuilder = angular.module('queryBuilder', []);
 queryBuilder.directive('queryBuilder', ['$compile', function ($compile) {
     return {
-        restrict: 'E',
+        restrict: 'A',
         scope: {
             group: '='
         },
diff --git a/index.html b/index.html
index ac540a0..83f65f9 100644
--- a/index.html
+++ b/index.html
@@ -18,39 +18,45 @@ <h1>Angular.js Query Builder</h1>
             <span ng-bind-html="output"></span>
         </div>
 
-        <query-builder group="filter.group"></query-builder>
+        <div query-builder group="filter.group"></div>
     </div>
 
     <script type="text/ng-template" id="/queryBuilderDirective.html">
-    <div class="alert alert-warning alert-group">
-        <div class="form-inline">
-            <select ng-options="o.name as o.name for o in operators" ng-model="group.operator" class="form-control input-sm"></select>
-            <button style="margin-left: 5px" ng-click="addCondition()" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Condition</button>
-            <button style="margin-left: 5px" ng-click="addGroup()" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Group</button>
-            <button style="margin-left: 5px" ng-click="removeGroup()" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-minus-sign"></span> Remove Group</button>
-        </div>
-        <div class="group-conditions">
-            <div ng-repeat="rule in group.rules | orderBy:'index'" class="condition">
-                <div ng-switch="rule.hasOwnProperty('group')">
-                    <div ng-switch-when="true">
-                        <query-builder group="rule.group"></query-builder>
-                    </div>
-                    <div ng-switch-default="ng-switch-default">
-                        <div class="form-inline">
-                            <select ng-options="t.name as t.name for t in fields" ng-model="rule.field" class="form-control input-sm"></select>
-                            <select style="margin-left: 5px" ng-options="c.name as c.name for c in conditions" ng-model="rule.condition" class="form-control input-sm"></select>
-                            <input style="margin-left: 5px" type="text" ng-model="rule.data" class="form-control input-sm"/>
-                            <button style="margin-left: 5px" ng-click="removeCondition($index)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
+        <div class="alert alert-warning alert-group">
+            <div class="form-inline">
+                <select ng-options="o.name as o.name for o in operators" ng-model="group.operator" class="form-control input-sm"></select>
+                <button style="margin-left: 5px" ng-click="addCondition()" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Condition</button>
+                <button style="margin-left: 5px" ng-click="addGroup()" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Group</button>
+                <button style="margin-left: 5px" ng-click="removeGroup()" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-minus-sign"></span> Remove Group</button>
+            </div>
+            <div class="group-conditions">
+                <div ng-repeat="rule in group.rules | orderBy:'index'" class="condition">
+                    <div ng-switch="rule.hasOwnProperty('group')">
+                        <div ng-switch-when="true">
+                            <div query-builder group="rule.group"></div>
+                        </div>
+                        <div ng-switch-default="ng-switch-default">
+                            <div class="form-inline">
+                                <select ng-options="t.name as t.name for t in fields" ng-model="rule.field" class="form-control input-sm"></select>
+                                <select style="margin-left: 5px" ng-options="c.name as c.name for c in conditions" ng-model="rule.condition" class="form-control input-sm"></select>
+                                <input style="margin-left: 5px" type="text" ng-model="rule.data" class="form-control input-sm"/>
+                                <button style="margin-left: 5px" ng-click="removeCondition($index)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
     </script>
 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-sanitize.min.js"></script>
     <script src="angular-query-builder.js"></script>
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
   </body>
 </html>
\ No newline at end of file