diff --git a/rd_ui/app/index.html b/rd_ui/app/index.html
index e6c1b096..64e476d3 100644
--- a/rd_ui/app/index.html
+++ b/rd_ui/app/index.html
@@ -127,7 +127,8 @@
 <script src="/scripts/visualizations/cohort.js"></script>
 <script src="/scripts/visualizations/table.js"></script>
 <script src="/scripts/visualizations/pivot.js"></script>
-<script src="/scripts/directives.js"></script>
+<script src="/scripts/directives/directives.js"></script>
+<script src="/scripts/directives/query_directives.js"></script>
 <script src="/scripts/filters.js"></script>
 <!-- endbuild -->
 
diff --git a/rd_ui/app/scripts/controllers/query_view.js b/rd_ui/app/scripts/controllers/query_view.js
index 51e47d96..801873b3 100644
--- a/rd_ui/app/scripts/controllers/query_view.js
+++ b/rd_ui/app/scripts/controllers/query_view.js
@@ -23,16 +23,7 @@
             $scope.queryExecuting = lock;
         };
 
-        $scope.formatQuery = function () {
-            $scope.editorOptions.readOnly = 'nocursor';
 
-            $http.post('/api/queries/format', {
-                'query': $scope.query.query
-            }).success(function (response) {
-                $scope.query.query = response;
-                $scope.editorOptions.readOnly = false;
-            })
-        }
 
         $scope.duplicateQuery = function () {
             var oldId = $scope.query.id;
@@ -53,42 +44,6 @@
             $scope.queryResult.cancelExecution();
         };
 
-        $scope.editorOptions = {
-            mode: 'text/x-sql',
-            lineWrapping: true,
-            lineNumbers: true,
-            readOnly: false,
-            matchBrackets: true,
-            autoCloseBrackets: true
-        };
-
-        $scope.refreshOptions = [
-            {
-                value: -1,
-                name: 'No Refresh'
-            },
-            {
-                value: 60,
-                name: 'Every minute'
-            },
-        ]
-
-        _.each(_.range(1, 13), function (i) {
-            $scope.refreshOptions.push({
-                value: i * 3600,
-                name: 'Every ' + i + 'h'
-            });
-        })
-
-        $scope.refreshOptions.push({
-            value: 24 * 3600,
-            name: 'Every 24h'
-        });
-        $scope.refreshOptions.push({
-            value: 7 * 24 * 3600,
-            name: 'Once a week'
-        });
-
         $scope.$watch('queryResult && queryResult.getError()', function (newError, oldError) {
             if (newError == undefined) {
                 return;
diff --git a/rd_ui/app/scripts/directives.js b/rd_ui/app/scripts/directives/directives.js
similarity index 100%
rename from rd_ui/app/scripts/directives.js
rename to rd_ui/app/scripts/directives/directives.js
diff --git a/rd_ui/app/scripts/directives/query_directives.js b/rd_ui/app/scripts/directives/query_directives.js
new file mode 100644
index 00000000..631b54ba
--- /dev/null
+++ b/rd_ui/app/scripts/directives/query_directives.js
@@ -0,0 +1,102 @@
+(function() {
+  'use strict'
+  function queryEditor() {
+    return {
+      restrict: 'E',
+      scope: {
+        'query': '=',
+        'lock': '='
+      },
+      template: '<textarea\
+                  ui-codemirror="editorOptions"\
+                  ng-model="query.query">',
+      link: function($scope) {
+        $scope.editorOptions = {
+            mode: 'text/x-sql',
+            lineWrapping: true,
+            lineNumbers: true,
+            readOnly: false,
+            matchBrackets: true,
+            autoCloseBrackets: true
+        };
+
+        $scope.$watch('lock', function(locked) {
+          $scope.editorOptions.readOnly = locked ? 'nocursor' : false;
+        });
+      }
+    }
+  }
+
+  function queryFormatter($http) {
+    return {
+      restrict: 'E',
+      scope: {
+        'query': '=',
+        'lock': '='
+      },
+      template: '<button type="button" class="btn btn-default btn-xs"\
+                   ng-click="formatQuery()">\
+                    <span class="glyphicon glyphicon-indent-left"></span>\
+                     Format SQL\
+                </button>',
+      link: function($scope) {
+        $scope.formatQuery = function formatQuery() {
+            $scope.lock = true;
+            $http.post('/api/queries/format', {
+                'query': $scope.query.query
+            }).success(function (response) {
+                $scope.query.query = response;
+            }).finally(function () {
+              $scope.lock = false;
+            });
+        };
+      }
+    }
+  }
+
+  function queryRefreshSelect() {
+    return {
+      restrict: 'E',
+      template: '<select\
+                  ng-disabled="!isOwner"\
+                  ng-model="query.ttl"\
+                  ng-change="saveQuery()"\
+                  ng-options="c.value as c.name for c in refreshOptions">\
+                  </select>',
+      link: function($scope) {
+        $scope.refreshOptions = [
+            {
+                value: -1,
+                name: 'No Refresh'
+            },
+            {
+                value: 60,
+                name: 'Every minute'
+            },
+        ]
+
+        _.each(_.range(1, 13), function (i) {
+            $scope.refreshOptions.push({
+                value: i * 3600,
+                name: 'Every ' + i + 'h'
+            });
+        })
+
+        $scope.refreshOptions.push({
+            value: 24 * 3600,
+            name: 'Every 24h'
+        });
+        $scope.refreshOptions.push({
+            value: 7 * 24 * 3600,
+            name: 'Once a week'
+        });
+      }
+
+    }
+  }
+
+  angular.module('redash.directives')
+  .directive('queryRefreshSelect', queryRefreshSelect)
+  .directive('queryEditor', queryEditor)
+  .directive('queryFormatter', ['$http', queryFormatter]);
+})();
\ No newline at end of file
diff --git a/rd_ui/app/views/query.html b/rd_ui/app/views/query.html
index d8d4df81..01c55615 100644
--- a/rd_ui/app/views/query.html
+++ b/rd_ui/app/views/query.html
@@ -60,7 +60,7 @@
                     <button type="button" class="btn btn-primary btn-xs" ng-disabled="queryExecuting" ng-click="executeQuery()">
                         <span class="glyphicon glyphicon-play"></span> Execute
                     </button>
-                    <query-formatter query="query" lock="queryExecuting" editor-options="editorOptions"></query-formatter>
+                    <query-formatter query="query" lock="queryExecuting"></query-formatter>
                     <span class="pull-right">
                         <button class="btn btn-xs btn-default rd-hidden-xs" ng-show="canFork" ng-click="duplicateQuery()">
                             <span class="glyphicon glyphicon-share-alt"></span> Fork
@@ -75,7 +75,7 @@
 
             <!-- code editor -->
             <p ng-show="isSourceVisible">
-                <query-editor query="query"></query-editor>
+                <query-editor query="query" lock="queryExecuting"></query-editor>
             </p>
             <hr ng-show="isSourceVisible">
         </div>
diff --git a/rd_ui/app/views/queryview.html b/rd_ui/app/views/queryview.html
deleted file mode 100644
index 3bb5c54f..00000000
--- a/rd_ui/app/views/queryview.html
+++ /dev/null
@@ -1,183 +0,0 @@
-
-<div class="container">
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="row">
-                <div class="col-lg-10">
-                    <h2>
-                        <edit-in-place editable="isOwner" done="saveQuery" ignore-blanks='true' value="query.name"></edit-in-place>
-                    </h2>
-                    <p>
-                        <em>
-                            <edit-in-place editable="isOwner" done="saveQuery" editor="textarea" placeholder="No description" ignore-blanks='false' value="query.description"></edit-in-place>
-                        </em>
-                    </p>
-                </div>
-                <div class="col-lg-2" ng-hide="isNewQuery || !currentUser.hasPermission('view_source')">
-                    <a ng-href="{{sourceHref}}" ng-click="toggleSource()" class="hidden-xs pull-right">
-                        <span ng-show="isSourceVisible">Hide Source</span>
-                        <span ng-show="!isSourceVisible">View Source</span>
-                    </a>
-                </div>
-            </div>
-
-
-
-            <div class="visible-xs">
-                <p>
-                    <span class="text-muted">Last update </span>
-                    <strong>
-                        <rd-time-ago value="queryResult.query_result.retrieved_at"></rd-time-ago>
-                    </strong>
-                    &nbsp;
-                    <span class="text-muted">Created By </span>
-                    <strong ng-hide="isOwner">{{query.user.name}}</strong>
-                    <strong ng-show="isOwner">You</strong>
-                    &nbsp;
-                    <span class="text-muted">Runtime </span>
-                    <strong ng-show="!queryExecuting">{{queryResult.getRuntime() | durationHumanize}}</strong>
-                    <span ng-show="queryExecuting">Running&hellip;</span>
-                    &nbsp;
-                    <span class="text-muted">Rows </span>
-                    <strong>{{queryResult.getData().length}}</strong>
-                </p>
-                <p>
-                    <a ng-href="{{sourceHref}}" ng-click="toggleSource()">
-                        <span ng-show="isSourceVisible">Hide Source</span>
-                        <span ng-show="!isSourceVisible">View Source</span>
-                    </a>
-                </p>
-            </div>
-        </div>
-    </div>
-
-    <hr>
-
-    <div class="row">
-        <div class="col-lg-12">
-            <div ng-show="isSourceVisible">
-                <p>
-                    <button type="button" class="btn btn-primary btn-xs" ng-disabled="queryExecuting" ng-click="executeQuery()">
-                        <span class="glyphicon glyphicon-play"></span> Execute
-                    </button>
-                    <button type="button" class="btn btn-default btn-xs" ng-click="formatQuery()">
-                        <span class="glyphicon glyphicon-indent-left"></span> Format SQL
-                    </button>
-                    <span class="pull-right">
-                        <button class="btn btn-xs btn-default rd-hidden-xs" ng-show="canFork" ng-click="duplicateQuery()">
-                            <span class="glyphicon glyphicon-share-alt"></span> Fork
-                        </button>
-
-                        <button class="btn btn-success btn-xs" ng-show="canEdit" ng-click="saveQuery()">
-                            <span class="glyphicon glyphicon-floppy-disk"> </span> Save<span ng-show="dirty">&#42;</span>
-                        </button>
-                    </span>
-                </p>
-            </div>
-
-            <!-- code editor -->
-            <p ng-show="isSourceVisible">
-                <textarea ui-codemirror="editorOptions" ui-refresh="isSourceVisible" ng-model="query.query"></textarea>
-            </p>
-            <hr ng-show="isSourceVisible">
-        </div>
-
-    </div>
-
-    <div class="row">
-        <div class="col-lg-3 rd-hidden-xs">
-            <p>
-                <span class="glyphicon glyphicon-time"></span>
-                <span class="text-muted">Last update </span>
-                <strong>
-                    <rd-time-ago value="queryResult.query_result.retrieved_at"></rd-time-ago>
-                </strong>
-            </p>
-            <p>
-                <span class="glyphicon glyphicon-user"></span>
-                <span class="text-muted">Created By </span>
-                <strong ng-hide="isOwner">{{query.user.name}}</strong>
-                <strong ng-show="isOwner">You</strong>
-            </p>
-            <p>
-                <span class="glyphicon glyphicon-play"></span>
-                <span class="text-muted">Runtime </span>
-                <strong ng-show="!queryExecuting">{{queryResult.getRuntime() | durationHumanize}}</strong>
-                <span ng-show="queryExecuting">Running&hellip;</span>
-            </p>
-            <p>
-                <span class="glyphicon glyphicon-align-justify"></span>
-                <span class="text-muted">Rows </span><strong>{{queryResult.getData().length}}</strong>
-            </p>
-            <p>
-                <span class="glyphicon glyphicon-refresh"></span>
-                <span class="text-muted">Refresh Interval</span>
-                <select ng-disabled="!isOwner" ng-model="query.ttl" ng-change="saveQuery()" ng-options="c.value as c.name for c in refreshOptions"></select>
-            </p>
-
-            <p>
-                <span class="glyphicon glyphicon-hdd"></span>
-                <span class="text-muted">Data Source</span>
-                <select ng-disabled="!isOwner" ng-model="query.data_source_id" ng-change="updateDataSource()" ng-options="ds.id as ds.name for ds in dataSources"></select>
-            </p>
-
-            <hr>
-
-            <p>
-                <a class="btn btn-primary btn-sm" ng-disabled="queryExecuting || !queryResult.getData()" ng-href="{{dataUri}}" download="{{dataFilename}}" target="_self">
-                    <span class="glyphicon glyphicon-cloud-download"></span>
-                    <span class="rd-hidden-xs">Download Dataset</span>
-                </a>
-            </p>
-        </div>
-
-        <div class="col-lg-9">
-            <!-- alerts -->
-            <div class="alert alert-info" ng-show="queryResult.getStatus() == 'processing'">
-                Executing query&hellip; <rd-timer timestamp="queryResult.getUpdatedAt()"></rd-timer>
-                <button type="button" class="btn btn-warning btn-xs pull-right" ng-disabled="cancelling" ng-click="cancelExecution()">Cancel</button>
-            </div>
-            <div class="alert alert-info" ng-show="queryResult.getStatus() == 'waiting'">
-                Query in queue&hellip; <rd-timer timestamp="queryResult.getUpdatedAt()"></rd-timer>
-                <button type="button" class="btn btn-warning btn-xs pull-right" ng-disabled="cancelling" ng-click="cancelExecution()">Cancel</button>
-            </div>
-            <div class="alert alert-danger" ng-show="queryResult.getError()">Error running query: <strong>{{queryResult.getError()}}</strong></div>
-
-            <!-- tabs and data -->
-            <div ng-show="queryResult.getStatus() == 'done'">
-                <div class="row">
-                    <div class="col-lg-12">
-                        <ul class="nav nav-tabs">
-                            <rd-tab tab-id="table" name="Table"></rd-tab>
-                            <rd-tab tab-id="pivot" name="Pivot Table"></rd-tab>
-                            <rd-tab tab-id="{{vis.id}}" name="{{vis.name}}" ng-hide="vis.type=='TABLE'" ng-repeat="vis in query.visualizations">
-                                <span class="remove" ng-click="deleteVisualization($event, vis)" ng-show="canEdit"> &times;</span>
-                            </rd-tab>
-                            <rd-tab tab-id="add" name="&plus; New" removeable="true" ng-show="canEdit"></rd-tab>
-                        </ul>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-lg-12">
-                        <div ng-show="selectedTab == 'table'" >
-                            <filters></filters>
-                            <grid-renderer query-result="queryResult" items-per-page="50"></grid-renderer>
-                        </div>
-
-                        <pivot-table-renderer ng-show="selectedTab == 'pivot'" query-result="queryResult"></pivot-table-renderer>
-
-                        <div ng-show="selectedTab == vis.id" ng-repeat="vis in query.visualizations">
-                            <visualization-renderer visualization="vis" query-result="queryResult"></visualization-renderer>
-                            <edit-visulatization-form visualization="vis" query="query" query-result="queryResult" ng-show="canEdit"></edit-visulatization-form>
-                        </div>
-
-                        <div ng-show="selectedTab == 'add'">
-                            <visualization-renderer visualization="newVisualization" query-result="queryResult"></visualization-renderer>
-                            <edit-visulatization-form visualization="newVisualization" query="query" ng-show="canEdit"></edit-visulatization-form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>