diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js
index 00ad972e60a..1f85952843b 100644
--- a/src/app/controllers/search.js
+++ b/src/app/controllers/search.js
@@ -136,7 +136,6 @@ function (angular, _, config) {
 
   });
 
-
   module.directive('tagColorFromName', function() {
 
     function djb2(str) {
diff --git a/src/app/directives/templateParamSelector.js b/src/app/directives/templateParamSelector.js
index 3bd2190fe44..df3b668496e 100644
--- a/src/app/directives/templateParamSelector.js
+++ b/src/app/directives/templateParamSelector.js
@@ -123,7 +123,9 @@ function (angular, app, _, $) {
           };
 
           scope.optionSelected = function(option) {
-            if (!variable.multi) {
+            option.selected = !option.selected;
+
+            if (!variable.multi || option.text === 'All') {
               _.each(scope.options, function(other) {
                 if (option !== other) {
                   other.selected = false;
@@ -133,19 +135,16 @@ function (angular, app, _, $) {
 
             var selected = _.filter(scope.options, {selected: true});
 
+            // enfore the first selected if no option is selected
             if (selected.length === 0) {
-              // encode the first selected if no option is selected
               scope.options[0].selected = true;
-              $timeout(function() {
-                scope.optionSelected(scope.options[0]);
-              });
-              return;
+              selected = [scope.options[0]];
             }
 
             if (selected.length > 1) {
               if (selected[0].text === 'All') {
+                selected[0].selected = false;
                 selected = selected.slice(1, selected.length);
-                debugger;
               }
             }
 
@@ -160,6 +159,7 @@ function (angular, app, _, $) {
             }
 
             scope.updateLinkText();
+            scope.onUpdated();
           };
 
           scope.hide = function() {
@@ -187,7 +187,7 @@ function (angular, app, _, $) {
             scope.linkText += variable.current.text;
           };
 
-          scope.$watchGroup(['variable.hideLabel', 'variable.name', 'variable.label'], function() {
+          scope.$watchGroup(['variable.hideLabel', 'variable.name', 'variable.label', 'variable.current.text'], function() {
             scope.updateLinkText();
           });
         },
diff --git a/src/app/features/dashboard/partials/variableValueSelect.html b/src/app/features/dashboard/partials/variableValueSelect.html
index 490a84b257a..099e7f2fdd5 100644
--- a/src/app/features/dashboard/partials/variableValueSelect.html
+++ b/src/app/features/dashboard/partials/variableValueSelect.html
@@ -12,12 +12,13 @@
 	</div>
 
 	<div class="variable-options-container" ng-if="!query.tagcloud">
-		<div class="variable-option pointer" bindonce ng-repeat="option in options"
-				ng-class="{'selected': selected}" ng-href="{{row.url}}">
-				<i class="variable-option-check"></i>
-				<label for="var.option.{{$id}}" label">{{option.text}}</label>
+		<a class="variable-option pointer" bindonce ng-repeat="option in options"
+				ng-class="{'selected': option.selected}" ng-click="optionSelected(option)">
+				<i class="fa fa-fw fa-square-o"></i>
+				<i class="fa fa-fw fa-check-square-o"></i>
+				<span >{{option.text}}</label>
 			</div>
-		</div>
+		</a>
 	</div>
 </div>
 
diff --git a/src/css/less/submenu.less b/src/css/less/submenu.less
index 3fe5cfffd42..f49d56876f2 100644
--- a/src/css/less/submenu.less
+++ b/src/css/less/submenu.less
@@ -43,5 +43,21 @@
 
   .variable-option {
     display: block;
+    .fa {
+      font-size: 130%;
+      position: relative;
+      top: 2px;
+      padding-right: 6px;
+    }
+    .fa-check-square-o { display: none; }
+
+    &.selected {
+      .fa-square-o {
+        display: none;
+      }
+      .fa-check-square-o {
+        display: inline-block;
+      }
+    }
   }
 }