fix(ng:options): fix selecting options

Contains 3 fixes:

- the internal model was by mistake using "checked" property instead of
  "selected"
- use jqLite.prop() to set 'selected' property
- added inChangeEvent check - we should not interfere with the browser
  selecting elements when not necessary

1 files changed, 12 insertions, 4 deletions

diff --git a/src/widgets.js b/src/widgets.js
index b0430b95..f0376422 100644
--- a/src/widgets.js
+++ b/src/widgets.js
@@ -716,7 +716,8 @@ angularWidget('select', function(element){
     // optionGroupsCache[?][0] is the parent: either the SELECT or OPTGROUP element
     var optionGroupsCache = [[{element: selectElement, label:''}]],
         scope = this,
-        model = modelAccessor(scope, element);
+        model = modelAccessor(scope, element),
+        inChangeEvent;
 
     // find existing special options
     forEach(selectElement.children(), function(option){
@@ -733,6 +734,12 @@ angularWidget('select', function(element){
           tempScope = scope.$new(),
           value, optionElement, index, groupIndex, length, groupLength;
 
+      // let's set a flag that the current model change is due to a change event.
+      // the default action of option selection will cause the appropriate option element to be
+      // deselected and another one to be selected - there is no need for us to be updating the DOM
+      // in this case.
+      inChangeEvent = true;
+
       try {
         if (isMultiselect) {
           value = [];
@@ -768,6 +775,7 @@ angularWidget('select', function(element){
         scope.$root.$apply();
       } finally {
         tempScope = null; // TODO(misko): needs to be $destroy
+        inChangeEvent = false;
       }
     });
 
@@ -886,8 +894,8 @@ angularWidget('select', function(element){
               if (existingOption.id !== option.id) {
                 lastElement.val(existingOption.id = option.id);
               }
-              if (existingOption.selected !== option.selected) {
-                lastElement.attr('selected', option.selected);
+              if (!inChangeEvent && existingOption.selected !== option.selected) {
+                lastElement.prop('selected', (existingOption.selected = option.selected));
               }
             } else {
               // grow elements
@@ -902,7 +910,7 @@ angularWidget('select', function(element){
                 element: element,
                 label: option.label,
                 id: option.id,
-                checked: option.selected
+                selected: option.selected
               });
               if (lastElement) {
                 lastElement.after(element);