diff --git a/client/common/directives/ModelField/ModelField.js b/client/common/directives/ModelField/ModelField.js
index 4d10563e..abe12441 100644
--- a/client/common/directives/ModelField/ModelField.js
+++ b/client/common/directives/ModelField/ModelField.js
@@ -40,6 +40,25 @@ angular.module('dashboard.directives.ModelField', [
   };
 })
 
+.directive('mySelection', function () {
+  return {
+    link: function (scope, element, attrs) {
+      element.bind("change", function () {
+        scope.$apply(function (){
+          for(var i = 0; i <= element[0].childElementCount; i++) {
+            var isSelected = element[0].childNodes[i].selected;
+            if (isSelected) {
+              element[0].childNodes[i].setAttribute("selected", "selected");
+            } else {
+              element[0].childNodes[i].removeAttribute("selected", "selected");
+            }
+          }
+        });
+      });
+    }
+  };
+})
+
 .directive('modelFieldEdit', function($compile, $cookies) {
   function getTemplate(type, scope) {
     var template = '';
@@ -152,7 +171,7 @@ angular.module('dashboard.directives.ModelField', [
         //NOTE: need to add empty <option> element to prevent weird AngularJS select issue when handling first selection
         template = '<label class="col-sm-2 control-label">{{ display.label || key }}:</label>\
           <div class="col-sm-10">\
-            <select ng-model="data[key]" ng-options="'+ngOptions+'" ng-required="{{ model.properties[key].required }}" class="field form-control" ng-disabled="{{ display.readonly }}"><option value=""></option></select>\
+            <select ng-model="data[key]" my-Selection ng-options="'+ngOptions+'" ng-required="{{ model.properties[key].required }}" class="field form-control" ng-disabled="display.readonly"><option value=""></option></select>\
             <div class="model-field-description" ng-if="display.description">{{ display.description }}</div>\
           </div>';
         break;
@@ -278,8 +297,8 @@ angular.module('dashboard.directives.ModelField', [
             scope.model.properties[scope.key.property].display = scope.key;
           }
           scope.key = scope.key.property;
-        } 
-        
+        }
+
         var property = { display: {type: "text"} };
         if (scope.model.properties && scope.model.properties[scope.key]) property = scope.model.properties[scope.key];
         if (!property) {
@@ -290,7 +309,7 @@ angular.module('dashboard.directives.ModelField', [
           if (!property.display) property.display = {};
           //TODO: check the property definition in the loopback model and pick a better default "type"
           switch (property.type) {
-            case "date": 
+            case "date":
             case "Date":
                 property.display.type = "datetime";
             break;
@@ -338,7 +357,7 @@ angular.module('dashboard.directives.ModelField', [
           //Make sure boolean (checkbox) values are numeric (below only gets called on init and not when state changes)
           if (typeof scope.data[scope.key] === "string") scope.data[scope.key] = parseInt(scope.data[scope.key]);
         }
-        
+
         if (property.display.type == "slider") {
           if (typeof scope.data[scope.key] === 'undefined' || scope.data[scope.key] == null) {
             scope.data[scope.key] = property.display.options.from + ";" + property.display.options.to;
@@ -381,7 +400,7 @@ angular.module('dashboard.directives.ModelField', [
               break;
           }
         }
-        
+
         //Handle translating multi-select checks to scope.data[scope.key] output format
         scope.clickMultiSelectCheckbox = function(questionKey, itemKey, itemValue, multiSelectOptions) {
           var output = property.display.output == "array" ? [] : property.display.output == "object" ? {} : "";