Work arround for slower template variable dropdown when variable has many thousand values, now only top 1000 values are rendered to html, you can still search all values, Closes #2246

public/app/directives/valueSelectDropdown.js

@@ -29,7 +29,11 @@ function (angular, app, _) {
           return tag;
         });
 
-        vm.search = {query: '', options: vm.options};
+        vm.search = {
+          query: '',
+          options: vm.options.slice(0, Math.min(vm.options.length, 1000))
+        };
+
         vm.dropdownVisible = true;
       };
 
@@ -204,6 +208,8 @@ function (angular, app, _) {
         vm.search.options = _.filter(vm.options, function(option) {
           return option.text.toLowerCase().indexOf(vm.search.query.toLowerCase()) !== -1;
         });
+
+        vm.search.options = vm.search.options.slice(0, Math.min(vm.search.options.length, 1000));
       };
 
       vm.init = function() {

public/app/features/templating/templateValuesSrv.js

@@ -10,6 +10,7 @@ function (angular, _, kbn) {
 
   module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $location, templateSrv, timeSrv) {
     var self = this;
+
     function getNoneOption() { return { text: 'None', value: '', isNone: true }; }
 
     $rootScope.onAppEvent('time-range-changed', function()  {

public/app/partials/valueSelectDropdown.html

@@ -19,7 +19,7 @@
 					<span class="variable-option-icon"></span>
 					Selected ({{vm.selectedValues.length}})
 				</a>
-				<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.selectValue(option, $event)">
+				<a class="variable-option pointer" ng-repeat="option in vm.search.options" ng-class="{'selected': option.selected, 'highlighted': $index === vm.highlightIndex}" ng-click="vm.selectValue(option, $event)">
 					<span class="variable-option-icon"></span>
 					<span>{{option.text}}</span>
 				</a>