Fixed value dropdown not updating when it's current value updates, fixes #15566

public/app/core/directives/value_select_dropdown.ts

@@ -240,7 +240,7 @@ export class ValueSelectDropdownCtrl {
 /** @ngInject */
 /** @ngInject */
 export function valueSelectDropdown($compile, $window, $timeout, $rootScope) {
 export function valueSelectDropdown($compile, $window, $timeout, $rootScope) {
   return {
   return {
-    scope: { variable: '=', onUpdated: '&' },
+    scope: { dashboard: '=', variable: '=', onUpdated: '&' },
     templateUrl: 'public/app/partials/valueSelectDropdown.html',
     templateUrl: 'public/app/partials/valueSelectDropdown.html',
     controller: 'ValueSelectDropdownCtrl',
     controller: 'ValueSelectDropdownCtrl',
     controllerAs: 'vm',
     controllerAs: 'vm',
@@ -288,13 +288,13 @@ export function valueSelectDropdown($compile, $window, $timeout, $rootScope) {
         }
         }
       });
       });
 
 
-      const cleanUp = $rootScope.$on('template-variable-value-updated', () => {
-        scope.vm.updateLinkText();
-      });
-
-      scope.$on('$destroy', () => {
-        cleanUp();
-      });
+      scope.vm.dashboard.on(
+        'template-variable-value-updated',
+        () => {
+          scope.vm.updateLinkText();
+        },
+        scope
+      );
 
 
       scope.vm.init();
       scope.vm.init();
     },
     },

public/app/features/dashboard/components/SubMenu/template.html

@@ -4,7 +4,7 @@
       <label class="gf-form-label template-variable" ng-hide="variable.hide === 1">
       <label class="gf-form-label template-variable" ng-hide="variable.hide === 1">
         {{variable.label || variable.name}}
         {{variable.label || variable.name}}
       </label>
       </label>
-      <value-select-dropdown ng-if="variable.type !== 'adhoc' && variable.type !== 'textbox'" variable="variable" on-updated="ctrl.variableUpdated(variable)"></value-select-dropdown>
+      <value-select-dropdown ng-if="variable.type !== 'adhoc' && variable.type !== 'textbox'" dashboard="ctrl.dashboard" variable="variable" on-updated="ctrl.variableUpdated(variable)"></value-select-dropdown>
       <input type="text" ng-if="variable.type === 'textbox'" ng-model="variable.query" class="gf-form-input width-12"  ng-blur="variable.current.value != variable.query && variable.updateOptions() && ctrl.variableUpdated(variable);" ng-keydown="$event.keyCode === 13 && variable.current.value != variable.query && variable.updateOptions() && ctrl.variableUpdated(variable);" ></input>
       <input type="text" ng-if="variable.type === 'textbox'" ng-model="variable.query" class="gf-form-input width-12"  ng-blur="variable.current.value != variable.query && variable.updateOptions() && ctrl.variableUpdated(variable);" ng-keydown="$event.keyCode === 13 && variable.current.value != variable.query && variable.updateOptions() && ctrl.variableUpdated(variable);" ></input>
     </div>
     </div>
     <ad-hoc-filters ng-if="variable.type === 'adhoc'" variable="variable" dashboard="ctrl.dashboard"></ad-hoc-filters>
     <ad-hoc-filters ng-if="variable.type === 'adhoc'" variable="variable" dashboard="ctrl.dashboard"></ad-hoc-filters>