diff --git a/client/app/pages/queries/query.html b/client/app/pages/queries/query.html
index f3da2305..b93999e4 100644
--- a/client/app/pages/queries/query.html
+++ b/client/app/pages/queries/query.html
@@ -83,7 +83,10 @@
   <!-- editor -->
   <div class="container">
       <div class="row bg-white p-b-5" ng-if="sourceMode" resizable r-directions="['bottom']" r-height="300" style="min-height:100px;">
-        <schema-browser schema="schema" class="col-md-3 hidden-sm hidden-xs schema-container" ng-show="hasSchema"></schema-browser>
+        <schema-browser class="col-md-3 hidden-sm hidden-xs schema-container"
+                        schema="schema"
+                        ng-show="hasSchema">
+        </schema-browser>
 
         <div ng-class="editorSize" style="height:100%;">
             <div class="p-5">
diff --git a/client/app/pages/queries/schema-browser.html b/client/app/pages/queries/schema-browser.html
index ed83a4bd..2a9b6d45 100644
--- a/client/app/pages/queries/schema-browser.html
+++ b/client/app/pages/queries/schema-browser.html
@@ -1,13 +1,16 @@
 <div class="schema-container">
   <div class="p-t-5 p-b-5">
-    <input type="text" placeholder="Search schema..." class="form-control" ng-model="schemaFilter">
+    <input type="text" placeholder="Search schema..." class="form-control" ng-model="$ctrl.schemaFilter">
   </div>
 
-  <div class="schema-browser" vs-repeat vs-size="getSize(table)">
-    <div ng-repeat="table in schema | filter:schemaFilter track by table.name">
-      <div class="table-name" ng-click="showTable(table)">
-        <i class="fa fa-table"></i> <strong><span title="{{table.name}}">{{table.name}}</span>
-        <span ng-if="table.size !== undefined"> ({{table.size}})</span></strong>
+  <div class="schema-browser" vs-repeat vs-size="$ctrl.getSize(table)">
+    <div ng-repeat="table in $ctrl.schema | filter:$ctrl.schemaFilter track by table.name">
+      <div class="table-name" ng-click="$ctrl.showTable(table)">
+        <i class="fa fa-table"></i>
+        <strong>
+          <span title="{{table.name}}">{{table.name}}</span>
+          <span ng-if="table.size !== undefined"> ({{table.size}})</span>
+        </strong>
       </div>
       <div uib-collapse="table.collapsed">
         <div ng-repeat="column in table.columns track by column" style="padding-left:16px;">{{column}}</div>
diff --git a/client/app/pages/queries/schema-browser.js b/client/app/pages/queries/schema-browser.js
index e1912790..604c114d 100644
--- a/client/app/pages/queries/schema-browser.js
+++ b/client/app/pages/queries/schema-browser.js
@@ -1,31 +1,30 @@
 import template from './schema-browser.html';
 
-function schemaBrowser() {
-  return {
-    restrict: 'E',
-    scope: {
-      schema: '=',
-    },
-    template,
-    link($scope) {
-      $scope.showTable = (table) => {
-        table.collapsed = !table.collapsed;
-        $scope.$broadcast('vsRepeatTrigger');
-      };
+function SchemaBrowserCtrl($scope) {
+  this.showTable = (table) => {
+    table.collapsed = !table.collapsed;
+    $scope.$broadcast('vsRepeatTrigger');
+  };
 
-      $scope.getSize = (table) => {
-        let size = 18;
+  this.getSize = (table) => {
+    let size = 18;
 
-        if (!table.collapsed) {
-          size += 18 * table.columns.length;
-        }
+    if (!table.collapsed) {
+      size += 18 * table.columns.length;
+    }
 
-        return size;
-      };
-    },
+    return size;
   };
 }
 
+const SchemaBrowser = {
+  bindings: {
+    schema: '<',
+  },
+  controller: SchemaBrowserCtrl,
+  template,
+};
+
 export default function (ngModule) {
-  ngModule.directive('schemaBrowser', schemaBrowser);
+  ngModule.component('schemaBrowser', SchemaBrowser);
 }