diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts
index 0de55e33ccc..82a4a116f89 100644
--- a/public/app/features/panel/panel_ctrl.ts
+++ b/public/app/features/panel/panel_ctrl.ts
@@ -22,6 +22,7 @@ export class PanelCtrl {
   pluginName: string;
   pluginId: string;
   editorTabs: any;
+  optionTabs: any;
   $scope: any;
   $injector: any;
   $location: any;
@@ -96,9 +97,10 @@ export class PanelCtrl {
 
   initEditMode() {
     this.editorTabs = [];
-    this.addEditorTab('Queries', metricsTabDirective, 0, 'fa fa-database');
-    this.addEditorTab('Visualization', vizTabDirective, 1, 'fa fa-line-chart');
-    this.addEditorTab('General', 'public/app/partials/panelgeneral.html');
+    this.optionTabs = [];
+    this.addCommonTab('Queries', metricsTabDirective, 0, 'fa fa-database');
+    this.addCommonTab('Visualization', vizTabDirective, 1, 'fa fa-line-chart');
+    this.addCommonTab('General', 'public/app/partials/panelgeneral.html');
 
     this.editModeInitiated = true;
     this.events.emit('init-edit-mode', null);
@@ -120,7 +122,7 @@ export class PanelCtrl {
     route.updateParams();
   }
 
-  addEditorTab(title, directiveFn, index?, icon?) {
+  addCommonTab(title, directiveFn, index?, icon?) {
     const editorTab = { title, directiveFn, icon };
 
     if (_.isString(directiveFn)) {
@@ -136,6 +138,18 @@ export class PanelCtrl {
     }
   }
 
+  addEditorTab(title, directiveFn, index?, icon?) {
+    const editorTab = { title, directiveFn, icon };
+
+    if (_.isString(directiveFn)) {
+      editorTab.directiveFn = () => {
+        return { templateUrl: directiveFn };
+      };
+    }
+
+    this.optionTabs.push(editorTab);
+  }
+
   getMenu() {
     const menu = [];
     menu.push({
diff --git a/public/app/features/panel/panel_editor_tab.ts b/public/app/features/panel/panel_editor_tab.ts
index fe83a892cc7..d16bab3dc55 100644
--- a/public/app/features/panel/panel_editor_tab.ts
+++ b/public/app/features/panel/panel_editor_tab.ts
@@ -13,11 +13,12 @@ function panelEditorTab(dynamicDirectiveSrv) {
     },
     directive: scope => {
       const pluginId = scope.ctrl.pluginId;
-      const tabIndex = scope.index;
+      const tabName = scope.editorTab.title.toLowerCase();
 
+      console.log('panelEditorTab', pluginId, tabName);
       if (directiveCache[pluginId]) {
-        if (directiveCache[pluginId][tabIndex]) {
-          return directiveCache[pluginId][tabIndex];
+        if (directiveCache[pluginId][tabName]) {
+          return directiveCache[pluginId][tabName];
         }
       } else {
         directiveCache[pluginId] = [];
@@ -25,10 +26,10 @@ function panelEditorTab(dynamicDirectiveSrv) {
 
       const result = {
         fn: () => scope.editorTab.directiveFn(),
-        name: `panel-editor-tab-${pluginId}${tabIndex}`,
+        name: `panel-editor-tab-${pluginId}${tabName}`,
       };
 
-      directiveCache[pluginId][tabIndex] = result;
+      directiveCache[pluginId][tabName] = result;
 
       return result;
     },
diff --git a/public/app/features/panel/viz_tab.ts b/public/app/features/panel/viz_tab.ts
index 972cf9d43cc..d52511b55da 100644
--- a/public/app/features/panel/viz_tab.ts
+++ b/public/app/features/panel/viz_tab.ts
@@ -27,7 +27,10 @@ const template = `
     <viz-type-picker currentType="ctrl.panelCtrl.panel.type" onTypeChanged="ctrl.onTypeChanged"></viz-type-picker>
   </div>
   <div class="viz-editor-col2">
-    <h5 class="page-heading">Options</h5>
+    <div ng-repeat="tab in ctrl.panelCtrl.optionTabs" >
+      <h5 class="page-heading">{{tab.title}}</h5>
+      <panel-editor-tab editor-tab="tab" ctrl="ctrl.panelCtrl" index="$index"></panel-editor-tab>
+    </div>
   </div>
 </div>
 `;
@@ -37,7 +40,6 @@ export function vizTabDirective() {
   'use strict';
   return {
     restrict: 'E',
-    scope: true,
     template: template,
     controller: VizTabCtrl,
   };