diff --git a/src/app/panels/annotations/editor.html b/src/app/panels/annotations/editor.html
index 2359036ae91..e1184193009 100644
--- a/src/app/panels/annotations/editor.html
+++ b/src/app/panels/annotations/editor.html
@@ -1,4 +1,5 @@
-<div bindonce class="modal-body">
+<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
+	<div class="modal-body">
   <div class="pull-right editor-title">Annotations</div>
 
   <div class="editor-row">
@@ -29,7 +30,7 @@
 
     <div class="editor-option">
       <label class="small">Name</label>
-      <input type="text" class="input-medium" ng-model='currentAnnnotation.name' placeholder="name"></input>
+      <input type="text" class="input-medium" ng-model='currentAnnotation.name' placeholder="name"></input>
     </div>
     <div class="editor-option">
       <label class="small">Datasource</label>
@@ -37,19 +38,19 @@
     </div>
     <div class="editor-option">
       <label class="small">Icon color</label>
-       <spectrum-picker ng-model="currentAnnnotation.iconColor"></spectrum-picker>
+       <spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
     </div>
      <div class="editor-option">
       <label class="small">Icon size</label>
-      <select class="input-mini" ng-model="currentAnnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
+      <select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
     </div>
     <div class="editor-option">
       <label class="small">Grid line</label>
-      <input type="checkbox" ng-model="currentAnnnotation.showLine" ng-checked="currentAnnnotation.showLine">
+      <input type="checkbox" ng-model="currentAnnotation.showLine" ng-checked="currentAnnotation.showLine">
     </div>
     <div class="editor-option">
       <label class="small">Line color</label>
-       <spectrum-picker ng-model="currentAnnnotation.lineColor"></spectrum-picker>
+       <spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
     </div>
   </div>
 
@@ -63,3 +64,4 @@
   <button ng-show="!currentIsNew" type="button" class="btn btn-success" ng-click="update()">Update</button>
   <button type="button" class="btn btn-danger" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
 </div>
+</div>
diff --git a/src/app/panels/annotations/editor.js b/src/app/panels/annotations/editor.js
new file mode 100644
index 00000000000..4afc322d032
--- /dev/null
+++ b/src/app/panels/annotations/editor.js
@@ -0,0 +1,64 @@
+/*
+
+*/
+define([
+  'angular',
+  'app',
+  'underscore'
+],
+function (angular, app, _) {
+  'use strict';
+
+  var module = angular.module('kibana.panels.annotations', []);
+  app.useModule(module);
+
+  module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv, $rootScope) {
+
+    var annotationDefaults = {
+      name: '',
+      datasource: null,
+      showLine: true,
+      iconColor: '#C0C6BE',
+      lineColor: 'rgba(255, 96, 96, 0.592157)',
+      iconSize: 13,
+      enable: true
+    };
+
+    $scope.init = function() {
+      $scope.currentAnnotation = angular.copy(annotationDefaults);
+      $scope.currentIsNew = true;
+      $scope.datasources = datasourceSrv.getAnnotationSources();
+
+      if ($scope.datasources.length > 0) {
+        $scope.currentDatasource = $scope.datasources[0];
+      }
+    };
+
+    $scope.setDatasource = function() {
+      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
+    };
+
+    $scope.edit = function(annotation) {
+      $scope.currentAnnotation = annotation;
+      $scope.currentIsNew = false;
+      $scope.currentDatasource = _.findWhere($scope.datasources, { name: annotation.datasource });
+    };
+
+    $scope.update = function() {
+      $scope.currentAnnotation = angular.copy(annotationDefaults);
+      $scope.currentIsNew = true;
+    };
+
+    $scope.add = function() {
+      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
+      $scope.panel.annotations.push($scope.currentAnnotation);
+      $scope.currentAnnnotation = angular.copy(annotationDefaults);
+    };
+
+    $scope.hide = function (annotation) {
+      annotation.enable = !annotation.enable;
+      $rootScope.$broadcast('refresh');
+    };
+
+  });
+});
diff --git a/src/app/panels/annotations/module.js b/src/app/panels/annotations/module.js
index b09a9fc0e53..339fb2e0f94 100644
--- a/src/app/panels/annotations/module.js
+++ b/src/app/panels/annotations/module.js
@@ -6,7 +6,8 @@
 define([
   'angular',
   'app',
-  'underscore'
+  'underscore',
+  './editor'
 ],
 function (angular, app, _) {
   'use strict';
@@ -26,48 +27,13 @@ function (angular, app, _) {
       annotations: []
     };
 
-    var annotationDefaults = {
-      name: '',
-      type: 'graphite metric',
-      showLine: true,
-      iconColor: '#C0C6BE',
-      lineColor: 'rgba(255, 96, 96, 0.592157)',
-      iconSize: 13,
-      enable: true
-    };
-
     _.defaults($scope.panel,_d);
 
-    $scope.init = function() {
-      $scope.currentAnnnotation = angular.copy(annotationDefaults);
-      $scope.currentIsNew = true;
-      $scope.datasources = datasourceSrv.getAnnotationSources();
-      if ($scope.datasources.length > 0) {
-        $scope.currentDatasource = $scope.datasources[0];
-      }
-    };
-
-    $scope.edit = function(annotation) {
-      $scope.currentAnnnotation = annotation;
-      $scope.currentIsNew = false;
-      $scope.currentDatasource = datasourceSrv.get(annotation.datasource);
-    };
-
-    $scope.update = function() {
-      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
-      $scope.currentAnnnotation = angular.copy(annotationDefaults);
-      $scope.currentIsNew = true;
-    };
-
-    $scope.add = function() {
-      $scope.panel.annotations.push($scope.currentAnnnotation);
-      $scope.currentAnnnotation = angular.copy(annotationDefaults);
-    };
-
     $scope.hide = function (annotation) {
       annotation.enable = !annotation.enable;
       $rootScope.$broadcast('refresh');
     };
 
   });
+
 });
diff --git a/src/app/partials/influxdb/annotation_editor.html b/src/app/partials/influxdb/annotation_editor.html
index 771c50f4661..e6573baa917 100644
--- a/src/app/partials/influxdb/annotation_editor.html
+++ b/src/app/partials/influxdb/annotation_editor.html
@@ -1,7 +1,7 @@
-<div class="editor-row"> 
+<div class="editor-row">
 	<div class="editor-option">
 		<label class="small">InfluxDB query</label>
-		<input type="text" class="span10" ng-model='currentAnnnotation.query' placeholder=""></input>
+		<input type="text" class="span10" ng-model='currentAnnotation.query' placeholder=""></input>
 	</div>
 </div>
 
diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js
index 418733d456a..31b92ef3d4f 100644
--- a/src/app/services/influxdb/influxdbDatasource.js
+++ b/src/app/services/influxdb/influxdbDatasource.js
@@ -119,6 +119,50 @@ function (angular, _, kbn, InfluxSeries) {
 
     };
 
+    InfluxDatasource.prototype.annotationQuery = function(annotation, filterSrv, rangeUnparsed) {
+      var timeFilter = getTimeFilter({ range: rangeUnparsed });
+      var query = _.template(annotation.query, {
+        timeFilter: timeFilter
+      }, this.templateSettings);
+
+      return this.doInfluxRequest(query)
+        .then(function (results) {
+          var list = [];
+          _.each(results, function (series) {
+            var descriptionCol = 0;
+            var tagsCol = 0;
+            _.each(series.columns, function(column, index) {
+              if (column === 'time' || column === 'sequence_number') {
+                return;
+              }
+
+              if (!descriptionCol) {
+                descriptionCol = index;
+              }
+              else {
+                tagsCol = index;
+              }
+            });
+
+            _.each(series.points, function (point) {
+              var data = {
+                annotation: annotation,
+                time: point[0] * 1000,
+                description: point[descriptionCol]
+              };
+
+              if (tagsCol) {
+                data.tags = point[tagsCol];
+              }
+
+              list.push(data);
+            });
+          });
+
+          return list;
+        });
+    };
+
     InfluxDatasource.prototype.listColumns = function(seriesName) {
       return this.doInfluxRequest('select * from /' + seriesName + '/ limit 1').then(function(data) {
         if (!data) {