diff --git a/src/app/directives/templateParamSelector.js b/src/app/directives/templateParamSelector.js
index f05d6959198..545e2e89661 100644
--- a/src/app/directives/templateParamSelector.js
+++ b/src/app/directives/templateParamSelector.js
@@ -40,9 +40,9 @@ function (angular, app, _, $) {
             minLength: 0,
             items: 10,
             updater: function(value) {
-              updateVariableValue(value);
+              $input.val(value);
               $input.trigger('blur');
-              return '';
+              return value;
             }
           });
 
diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html
index 029e11bfd15..42884a84058 100644
--- a/src/app/partials/submenu.html
+++ b/src/app/partials/submenu.html
@@ -21,7 +21,9 @@
 						<strong>VARIABLES</strong>
 					</li>
 					<li ng-repeat-start="variable in variables" class="grafana-target-segment template-param-name">
-						{{variable.name}}:
+						<span class="template-variable ">
+						${{variable.name}}:
+						</span>
 					</li>
 
 					<li ng-repeat-end template-param-selector>
diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html
index b030f4358f2..90d1fb50d26 100644
--- a/src/app/partials/templating_editor.html
+++ b/src/app/partials/templating_editor.html
@@ -23,7 +23,9 @@
 					<table class="grafana-options-table">
 						<tr ng-repeat="variable in variables">
 							<td style="width: 1%">
-								[[{{variable.name}}]]
+								<span class="template-variable">
+									${{variable.name}}
+								</span>
 							</td>
 							<td class="max-width" style="max-width: 200px;">
 								{{variable.query}}