diff --git a/client/app/components/parameter-settings.html b/client/app/components/parameter-settings.html
index f5a8a92996..b4a8825df2 100644
--- a/client/app/components/parameter-settings.html
+++ b/client/app/components/parameter-settings.html
@@ -30,7 +30,7 @@ <h4 class="modal-title">{{$ctrl.parameter.name}}</h4>
       </div>
       <div class="form-group" ng-if="$ctrl.parameter.type === 'query'">
         <label>Saved query (single column output)</label>
-        <ui-select ng-model="$ctrl.parameter.query" theme="bootstrap" reset-search-input="false" on-select="$ctrl.onQuerySelect($item)">
+        <ui-select ng-model="$ctrl.parameter.queryBasedOption" theme="bootstrap" reset-search-input="false">
             <ui-select-match placeholder="Search a query by name">{{$select.selected.name}}</ui-select-match>
             <ui-select-choices repeat="q in $ctrl.queries"
                                refresh="$ctrl.searchQueries($select.search)"
diff --git a/client/app/components/parameters.html b/client/app/components/parameters.html
index aac1865da0..e391e1c10f 100644
--- a/client/app/components/parameters.html
+++ b/client/app/components/parameters.html
@@ -19,11 +19,10 @@
           <option ng-repeat="option in extractEnumOptions(param.enumOptions)" value="{{option}}">{{option}}</option>
         </select>
       </span>
-      <span ng-switch-when="query" ng-controller="QueryBasedParameterController">
-        <select ng-model="param.value" class="form-control" ng-options="queryResult for queryResult in queryResults">
-        </select>
+      <span ng-switch-when="query">
+        <query-based-parameter param="param"></query-based-parameter>
       </span>
       <input ng-switch-default type="{{param.type}}" class="form-control" ng-model="param.ngModel">
     </span>
-  </
+  </div>
 </div>
diff --git a/client/app/components/parameters.js b/client/app/components/parameters.js
index 9aa02b4265..5cca81c994 100644
--- a/client/app/components/parameters.js
+++ b/client/app/components/parameters.js
@@ -1,6 +1,15 @@
 import template from './parameters.html';
+import queryBasedParameterTemplate from './query-based-parameter.html';
 import parameterSettingsTemplate from './parameter-settings.html';
 
+const QueryBasedOption = (query) => {
+  const queryBasedOption = {
+    id: query.id,
+    name: query.name,
+  };
+  return queryBasedOption;
+};
+
 const ParameterSettingsComponent = {
   template: parameterSettingsTemplate,
   bindings: {
@@ -13,39 +22,73 @@ const ParameterSettingsComponent = {
 
     this.trustAsHtml = html => $sce.trustAsHtml(html);
     this.parameter = this.resolve.parameter;
-    this.onQuerySelect = (query) => {
-      this.parameter.query = query;
-    };
     this.searchQueries = (term) => {
       if (!term || term.length < 3) {
         return;
       }
 
       Query.search({ q: term }, (results) => {
-        this.queries = results;
+        this.queries = results.map(query => QueryBasedOption(query));
       });
     };
   },
 };
 
-function QueryBasedParameterController($scope, Query) {
-  $scope.queryResults = [];
-  $scope.$watch('param', () => {
-    const param = $scope.param;
-    if (param.query !== null) {
-      Query.resultById(
-        { id: param.query.id },
-        (result) => {
-          const queryResult = result.query_result;
-          const columns = queryResult.data.columns;
-          const numColumns = columns.length;
-          if (numColumns > 0 && columns[0].type === 'string') {
-            $scope.queryResults = queryResult.data.rows.map(row => row[columns[0].name]);
-          }
-        });
-    }
-  }, true);
-}
+const QueryBasedParameterComponent = {
+  template: queryBasedParameterTemplate,
+  bindings: {
+    param: '=',
+  },
+  controller($scope, Query) {
+    'ngInject';
+
+    this.queryResultOptions = [];
+    $scope.$watch('$ctrl.param', () => {
+      if (this.param.queryBasedOption !== null) {
+        Query.resultById(
+          { id: this.param.queryBasedOption.id },
+          (result) => {
+            const queryResult = result.query_result;
+            const columns = queryResult.data.columns;
+            const numColumns = columns.length;
+            // If there are multiple columns, check if there is a column
+            // named 'name' and column named 'value'. If name column is present
+            // in results, use name from name column. Similar for value column.
+            // Default: Use first string column for name and value.
+            if (numColumns > 0) {
+              let nameColumn = null;
+              let valueColumn = null;
+              columns.forEach((column) => {
+                const columnName = column.name.toLowerCase();
+                if (column.type === 'string' && columnName === 'name') {
+                  nameColumn = column.name;
+                }
+                if (column.type === 'string' && columnName === 'value') {
+                  valueColumn = column.name;
+                }
+                // Assign first string column as name and value column.
+                if (nameColumn === null && column.type === 'string') {
+                  nameColumn = column.name;
+                }
+                if (valueColumn === null && column.type === 'string') {
+                  valueColumn = column.name;
+                }
+              });
+              if (nameColumn !== null && valueColumn !== null) {
+                this.queryResultOptions = queryResult.data.rows.map((row) => {
+                  const queryResultOption = {
+                    name: row[nameColumn],
+                    value: row[valueColumn],
+                  };
+                  return queryResultOption;
+                });
+              }
+            }
+          });
+      }
+    }, true);
+  },
+};
 
 function ParametersDirective($location, $uibModal) {
   return {
@@ -95,6 +138,6 @@ function ParametersDirective($location, $uibModal) {
 
 export default function (ngModule) {
   ngModule.directive('parameters', ParametersDirective);
-  ngModule.controller('QueryBasedParameterController', QueryBasedParameterController);
+  ngModule.component('queryBasedParameter', QueryBasedParameterComponent);
   ngModule.component('parameterSettings', ParameterSettingsComponent);
 }
diff --git a/client/app/components/query-based-parameter.html b/client/app/components/query-based-parameter.html
new file mode 100644
index 0000000000..132428bb81
--- /dev/null
+++ b/client/app/components/query-based-parameter.html
@@ -0,0 +1,2 @@
+<select ng-model="$ctrl.param.value" class="form-control" ng-options="option.value as option.name for option in $ctrl.queryResultOptions">
+</select>
diff --git a/client/app/services/query.js b/client/app/services/query.js
index 5e4bbdaf40..4678c6c46f 100644
--- a/client/app/services/query.js
+++ b/client/app/services/query.js
@@ -51,7 +51,7 @@ class Parameter {
     this.value = parameter.value;
     this.global = parameter.global;
     this.enumOptions = parameter.enumOptions;
-    this.query = parameter.query;
+    this.queryBasedOption = parameter.queryBasedOption;
   }
 
   get ngModel() {