perf(ngOptions): prevent initial options repaiting

Avoid double execution of `updateOptions()` method, which causes a complete repainting of all `<option>` elements.

Fixes #15801

Author: pbr1111

src/ng/directive/ngOptions.js

@@ -428,6 +428,9 @@ var ngOptionsDirective = ['$compile', '$document', '$parse', function($compile,
         }
       }
 
+      // Remove all the elements inside the select.
+      selectElement.empty();
+
       var providedEmptyOption = !!selectCtrl.emptyOption;
 
       var unknownOption = jqLite(optionTemplate.cloneNode(false));
@@ -449,36 +452,38 @@ var ngOptionsDirective = ['$compile', '$document', '$parse', function($compile,
       if (!multiple) {
 
         selectCtrl.writeValue = function writeNgOptionsValue(value) {
-          var selectedOption = options.selectValueMap[selectElement.val()];
-          var option = options.getOptionFromViewValue(value);
+          if (options) {
+            var selectedOption = options.selectValueMap[selectElement.val()];
+            var option = options.getOptionFromViewValue(value);
 
-          // Make sure to remove the selected attribute from the previously selected option
-          // Otherwise, screen readers might get confused
-          if (selectedOption) selectedOption.element.removeAttribute('selected');
+            // Make sure to remove the selected attribute from the previously selected option
+            // Otherwise, screen readers might get confused
+            if (selectedOption) selectedOption.element.removeAttribute('selected');
 
-          if (option) {
-            // Don't update the option when it is already selected.
-            // For example, the browser will select the first option by default. In that case,
-            // most properties are set automatically - except the `selected` attribute, which we
-            // set always
+            if (option) {
+              // Don't update the option when it is already selected.
+              // For example, the browser will select the first option by default. In that case,
+              // most properties are set automatically - except the `selected` attribute, which we
+              // set always
 
-            if (selectElement[0].value !== option.selectValue) {
-              selectCtrl.removeUnknownOption();
-              selectCtrl.unselectEmptyOption();
-
-              selectElement[0].value = option.selectValue;
-              option.element.selected = true;
-            }
+              if (selectElement[0].value !== option.selectValue) {
+                selectCtrl.removeUnknownOption();
+                selectCtrl.unselectEmptyOption();
 
-            option.element.setAttribute('selected', 'selected');
-          } else {
+                selectElement[0].value = option.selectValue;
+                option.element.selected = true;
+              }
 
-            if (providedEmptyOption) {
-              selectCtrl.selectEmptyOption();
-            } else if (selectCtrl.unknownOption.parent().length) {
-              selectCtrl.updateUnknownOption(value);
+              option.element.setAttribute('selected', 'selected');
             } else {
-              selectCtrl.renderUnknownOption(value);
+
+              if (providedEmptyOption) {
+                selectCtrl.selectEmptyOption();
+              } else if (selectCtrl.unknownOption.parent().length) {
+                selectCtrl.updateUnknownOption(value);
+              } else {
+                selectCtrl.renderUnknownOption(value);
+              }
             }
           }
         };
@@ -508,16 +513,18 @@ var ngOptionsDirective = ['$compile', '$document', '$parse', function($compile,
       } else {
 
         selectCtrl.writeValue = function writeNgOptionsMultiple(values) {
-          // Only set `<option>.selected` if necessary, in order to prevent some browsers from
-          // scrolling to `<option>` elements that are outside the `<select>` element's viewport.
+          if (options) {
+            // Only set `<option>.selected` if necessary, in order to prevent some browsers from
+            // scrolling to `<option>` elements that are outside the `<select>` element's viewport.
 
-          var selectedOptions = values && values.map(getAndUpdateSelectedOption) || [];
+            var selectedOptions = values && values.map(getAndUpdateSelectedOption) || [];
 
-          options.items.forEach(function(option) {
-            if (option.element.selected && !includes(selectedOptions, option)) {
-              option.element.selected = false;
-            }
-          });
+            options.items.forEach(function(option) {
+              if (option.element.selected && !includes(selectedOptions, option)) {
+                option.element.selected = false;
+              }
+            });
+          }
         };
 
 
@@ -552,13 +559,12 @@ var ngOptionsDirective = ['$compile', '$document', '$parse', function($compile,
 
       if (providedEmptyOption) {
 
-        // we need to remove it before calling selectElement.empty() because otherwise IE will
-        // remove the label from the element. wtf?
-        selectCtrl.emptyOption.remove();
-
         // compile the element since there might be bindings in it
         $compile(selectCtrl.emptyOption)(scope);
 
+        // Ensure that the empty option is always there if it was explicitly provided
+        selectElement.prepend(selectCtrl.emptyOption);
+
         if (selectCtrl.emptyOption[0].nodeType === NODE_TYPE_COMMENT) {
           // This means the empty option has currently no actual DOM node, probably because
           // it has been modified by a transclusion directive.
@@ -590,12 +596,6 @@ var ngOptionsDirective = ['$compile', '$document', '$parse', function($compile,
 
       }
 
-      selectElement.empty();
-
-      // We need to do this here to ensure that the options object is defined
-      // when we first hit it in writeNgOptionsValue
-      updateOptions();
-
       // We will re-render the option elements if the option values or labels change
       scope.$watchCollection(ngOptions.getWatchables, updateOptions);
 
@@ -624,7 +624,7 @@ var ngOptionsDirective = ['$compile', '$document', '$parse', function($compile,
         // the option list in listbox style, i.e. the select is [multiple], or specifies a [size].
         // See https://github.com/angular/angular.js/issues/11314 for more info.
         // This is unfortunately untestable with unit / e2e tests
-        if (option.label !== element.label) {
+        if (option.label !== undefined) {
           element.label = option.label;
           element.textContent = option.label;
         }
@@ -655,11 +655,6 @@ var ngOptionsDirective = ['$compile', '$document', '$parse', function($compile,
 
         var groupElementMap = {};
 
-        // Ensure that the empty option is always there if it was explicitly provided
-        if (providedEmptyOption) {
-          selectElement.prepend(selectCtrl.emptyOption);
-        }
-
         options.items.forEach(function addOption(option) {
           var groupElement;