Fix auto-select in agg type selection (#11105)

* Fix auto-select in agg type selection
This commit moves the $scope.$watch in the agg type selector to AFTER the code that watches for changes. This matters because in some cases, the agg type can be automatically selected, and if the $watch starts AFTER the agg type is automatically selected, the watch is triggered with the same old/new values, which means the params won't be correctly initialized.

* Move to functions and add explanation

src/core_plugins/kibana/public/visualize/editor/agg_params.js

@@ -23,23 +23,36 @@ uiModules
       $scope.aggTypeOptions = aggTypes.byType[$scope.groupName];
       $scope.advancedToggled = false;
 
+      // We set up this watch prior to adding the controls below, because when the controls are added,
+      // there is a possibility that the agg type can be automatically selected (if there is only one)
+      $scope.$watch('agg.type', updateAggParamEditor);
+
       // this will contain the controls for the schema (rows or columns?), which are unrelated to
       // controls for the agg, which is why they are first
-      const $schemaEditor = $('<div>').addClass('schemaEditors').appendTo($el);
+      addSchemaEditor();
+
+      // allow selection of an aggregation
+      addAggSelector();
 
-      if ($scope.agg.schema.editor) {
-        $schemaEditor.append($scope.agg.schema.editor);
-        $compile($schemaEditor)($scope.$new());
+      function addSchemaEditor() {
+        const $schemaEditor = $('<div>').addClass('schemaEditors').appendTo($el);
+
+        if ($scope.agg.schema.editor) {
+          $schemaEditor.append($scope.agg.schema.editor);
+          $compile($schemaEditor)($scope.$new());
+        }
       }
 
-      // allow selection of an aggregation
-      const $aggSelect = $(aggSelectHtml).appendTo($el);
-      $compile($aggSelect)($scope);
+      function addAggSelector() {
+        const $aggSelect = $(aggSelectHtml).appendTo($el);
+        $compile($aggSelect)($scope);
+      }
 
       // params for the selected agg, these are rebuilt every time the agg in $aggSelect changes
       let $aggParamEditors; //  container for agg type param editors
       let $aggParamEditorsScope;
-      $scope.$watch('agg.type', function updateAggParamEditor(newType, oldType) {
+
+      function updateAggParamEditor(newType, oldType) {
         if ($aggParamEditors) {
           $aggParamEditors.remove();
           $aggParamEditors = null;
@@ -115,7 +128,7 @@ uiModules
 
         $aggParamEditors = $(paramEditors).appendTo($el);
         $compile($aggParamEditors)($aggParamEditorsScope);
-      });
+      }
 
       // build HTML editor given an aggParam and index
       function getAggParamHTML(param, idx) {