Breaking out logic for variable dropdown into a controller, this needs some unit tests

public/app/features/dashboard/partials/variableValueSelect.html

-<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
-	{{labelText}}:
+<span class="template-variable tight-form-item" ng-show="!vm.variable.hideLabel" style="padding-right: 5px">
+	{{vm.labelText}}:
 </span>
 
 <div class="variable-link-wrapper">
 	<a ng-click="show()" class="variable-value-link tight-form-item">
-		{{linkText}}
-		<span class="label-tag" ng-repeat="tag in selectedTags" tag-color-from-name="tag.text">
+		{{vm.linkText}}
+		<span class="label-tag" ng-repeat="tag in vm.selectedTags" tag-color-from-name="tag.text">
 			{{tag.text}}
 			&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;
 		</span>
 		<i class="fa fa-caret-down"></i>
 	</a>
 
-	<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="keyDown($event)" ng-model="search.query" ng-change="queryChanged()" ></input>
+	<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
 
-	<div class="variable-value-dropdown" ng-if="dropdownVisible" ng-class="{'multi': variable.multi, 'single': !variable.multi}">
+	<div class="variable-value-dropdown" ng-if="vm.dropdownVisible" ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}">
 		<div class="variable-options-wrapper">
 			<div class="variable-options-column">
-				<a class="variable-options-column-header" ng-if="variable.multi" ng-class="{'many-selected': selectedValuesCount > 1}" bs-tooltip="'Clear selections'" data-placement="top" ng-click="clearSelections()">
+				<a class="variable-options-column-header" ng-if="vm.variable.multi" ng-class="{'many-selected': vm.selectedValuesCount > 1}" bs-tooltip="'Clear selections'" data-placement="top" ng-click="vm.clearSelections()">
 					<span class="variable-option-icon"></span>
-					Selected ({{selectedValuesCount}})
+					Selected ({{vm.selectedValuesCount}})
 				</a>
-				<a class="variable-option pointer" bindonce ng-repeat="option in search.options" ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
+				<a class="variable-option pointer" bindonce ng-repeat="option in vm.search.options" ng-class="{'selected': option.selected, 'highlighted': $index === vm.highlightIndex}" ng-click="vm.optionSelected(option, $event)">
 					<span class="variable-option-icon"></span>
 					<span>{{option.text}}</span>
 				</a>
 			</div>
-			<div class="variable-options-column" ng-if="tags.length">
+			<div class="variable-options-column" ng-if="vm.tags.length">
 				<div class="variable-options-column-header text-center">
 					Tags
 				</div>
-				<a class="variable-option-tag pointer" ng-repeat="tag in tags" ng-click="selectTag(tag, $event)" ng-class="{'selected': tag.selected}">
+				<a class="variable-option-tag pointer" ng-repeat="tag in vm.tags" ng-click="vm.selectTag(tag, $event)" ng-class="{'selected': tag.selected}">
 					<span class="fa fa-fw variable-option-icon"></span>
 					<span class="label-tag" tag-color-from-name="tag.text">{{tag.text}}&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;</span>
 				</a>

public/css/less/submenu.less

@@ -82,15 +82,6 @@
  }
 }
 
-.variable-option-icon {
-  display: inline-block;
-  width: 24px;
-  height: 18px;
-  position: relative;
-  top: 4px;
-  background: url(@checkboxImageUrl) left top no-repeat;
-}
-
 .variable-options-wrapper {
   display: table;
   width: 100%;
@@ -126,6 +117,15 @@
   }
 }
 
+.variable-option-icon {
+  display: inline-block;
+  width: 24px;
+  height: 18px;
+  position: relative;
+  top: 4px;
+  background: url(@checkboxImageUrl) left top no-repeat;
+}
+
 .variable-option {
   &:hover, &.highlighted {
     background-color: @blueDark;