diff --git a/public/app/core/directives/plugin_component.ts b/public/app/core/directives/plugin_component.ts
index e628fbede39..32b80cc0966 100644
--- a/public/app/core/directives/plugin_component.ts
+++ b/public/app/core/directives/plugin_component.ts
@@ -60,6 +60,17 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope) {
           });
         });
       }
+      // QueryOptionsCtrl
+      case "annotations-query-ctrl": {
+        return System.import(scope.currentDatasource.meta.module).then(function(dsModule) {
+          return {
+            name: 'annotations-query-ctrl-' + scope.currentDatasource.meta.id,
+            bindings: {annotation: "=", datasource: "="},
+            attrs: {"annotation": "currentAnnotation", datasource: "currentDatasource"},
+            Component: dsModule.AnnotationsQueryCtrl,
+          };
+        });
+      }
       // ConfigCtrl
       case 'datasource-config-ctrl': {
         return System.import(scope.datasourceMeta.module).then(function(dsModule) {
diff --git a/public/app/features/annotations/annotations_srv.js b/public/app/features/annotations/annotations_srv.js
index 9dce53084fe..b0022135ef5 100644
--- a/public/app/features/annotations/annotations_srv.js
+++ b/public/app/features/annotations/annotations_srv.js
@@ -2,7 +2,6 @@ define([
   'angular',
   'lodash',
   './editor_ctrl',
-  './query_editor'
 ], function (angular, _) {
   'use strict';
 
diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html
index 8894cb4b47f..f5d29e57677 100644
--- a/public/app/features/annotations/partials/editor.html
+++ b/public/app/features/annotations/partials/editor.html
@@ -91,8 +91,10 @@
 				</div>
 			</div>
 
-			<annotations-query-editor datasource="currentDatasource" annotation="currentAnnotation">
-			</annotations-query-editor>
+			<rebuild-on-change property="currentAnnotation.datasource">
+				<plugin-component type="annotations-query-ctrl">
+				</plugin-component>
+			</rebuild-on-change>
 
 			<br>
 			<button ng-show="mode === 'new'" type="button" class="btn btn-success" ng-click="add()">Add</button>
diff --git a/public/app/features/annotations/query_editor.ts b/public/app/features/annotations/query_editor.ts
deleted file mode 100644
index 42d3e9047b5..00000000000
--- a/public/app/features/annotations/query_editor.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-///<reference path="../../headers/common.d.ts" />
-
-import angular from 'angular';
-
-/** @ngInject */
-function annotationsQueryEditor(dynamicDirectiveSrv) {
-  return dynamicDirectiveSrv.create({
-    scope: {
-      annotation: "=",
-      datasource: "="
-    },
-    watchPath: "annotation.datasource",
-    directive: scope => {
-      return System.import(scope.datasource.meta.module).then(function(dsModule) {
-        return {
-          name: 'annotation-query-editor-' + scope.datasource.meta.id,
-          fn: dsModule.annotationsQueryEditor,
-        };
-      });
-    },
-  });
-}
-
-
-angular.module('grafana.directives').directive('annotationsQueryEditor', annotationsQueryEditor);
diff --git a/public/app/features/datasources/all.js b/public/app/features/datasources/all.js
index 8a57bbc5b8a..b181fd475c2 100644
--- a/public/app/features/datasources/all.js
+++ b/public/app/features/datasources/all.js
@@ -1,5 +1,4 @@
 define([
   './list_ctrl',
   './edit_ctrl',
-  './config_view',
 ], function () {});
diff --git a/public/app/features/datasources/config_view.ts b/public/app/features/datasources/config_view.ts
deleted file mode 100644
index 39f593ba508..00000000000
--- a/public/app/features/datasources/config_view.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-///<reference path="../../headers/common.d.ts" />
-
-import angular from 'angular';
-
-/** @ngInject */
-function dsConfigView(dynamicDirectiveSrv) {
-  return dynamicDirectiveSrv.create({
-    scope: {
-      dsMeta: "=",
-      current: "="
-    },
-    watchPath: "dsMeta.module",
-    directive: scope => {
-      return System.import(scope.dsMeta.module).then(function(dsModule) {
-        return {
-          name: 'ds-config-' + scope.dsMeta.id,
-          fn: dsModule.configView,
-        };
-      });
-    },
-  });
-}
-
-
-angular.module('grafana.directives').directive('dsConfigView', dsConfigView);
diff --git a/public/app/plugins/datasource/graphite/module.ts b/public/app/plugins/datasource/graphite/module.ts
index a743c0ff65a..63c04833fc2 100644
--- a/public/app/plugins/datasource/graphite/module.ts
+++ b/public/app/plugins/datasource/graphite/module.ts
@@ -9,49 +9,15 @@ class GraphiteQueryOptionsCtrl {
   static templateUrl = 'public/app/plugins/datasource/graphite/partials/query.options.html';
 }
 
+class AnnotationsQueryCtrl {
+  static templateUrl = 'public/app/plugins/datasource/graphite/partials/annotations.editor.html';
+}
 
 export {
   GraphiteDatasource as Datasource,
   GraphiteQueryCtrl as QueryCtrl,
   GraphiteConfigCtrl as ConfigCtrl,
   GraphiteQueryOptionsCtrl as QueryOptionsCtrl,
+  AnnotationsQueryCtrl as AnnotationsQueryCtrl,
 };
 
-// define([
-//   './datasource',
-// ],
-// function (GraphiteDatasource) {
-//   'use strict';
-//
-//   function metricsQueryEditor() {
-//     return {
-//       controller: 'GraphiteQueryCtrl',
-//       templateUrl: 'public/app/plugins/datasource/graphite/partials/query.editor.html'
-//     };
-//   }
-//
-//   function metricsQueryOptions() {
-//     return {templateUrl: 'public/app/plugins/datasource/graphite/partials/query.options.html'};
-//   }
-//
-//   function annotationsQueryEditor() {
-//     return {templateUrl: 'public/app/plugins/datasource/graphite/partials/annotations.editor.html'};
-//   }
-//
-//   function configView() {
-//     return {templateUrl: 'public/app/plugins/datasource/graphite/partials/config.html'};
-//   }
-//
-//   function ConfigView() {
-//   }
-//   ConfigView.templateUrl = 'public/app/plugins/datasource/graphite/partials/config.html';
-//
-//   return {
-//     Datasource: GraphiteDatasource,
-//     configView: configView,
-//     annotationsQueryEditor: annotationsQueryEditor,
-//     metricsQueryEditor: metricsQueryEditor,
-//     metricsQueryOptions: metricsQueryOptions,
-//     ConfigView: ConfigView
-//   };
-// });
diff --git a/public/app/plugins/datasource/graphite/partials/annotations.editor.html b/public/app/plugins/datasource/graphite/partials/annotations.editor.html
index 9253bf614a6..ea5c2f7f50f 100644
--- a/public/app/plugins/datasource/graphite/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/graphite/partials/annotations.editor.html
@@ -1,14 +1,14 @@
 <div class="editor-row">
 	<div class="editor-option">
 		<label class="small">Graphite target expression</label>
-		<input type="text" class="span10" ng-model='annotation.target' placeholder=""></input>
+		<input type="text" class="span10" ng-model='ctrl.annotation.target' placeholder=""></input>
 	</div>
 </div>
 
 <div class="editor-row">
 	<div class="editor-option">
 		<label class="small">Graphite event tags</label>
-		<input type="text" ng-model='annotation.tags' placeholder=""></input>
+		<input type="text" ng-model='ctrl.annotation.tags' placeholder=""></input>
 	</div>
 </div>