Sync classes

angular-selectize.js

@@ -130,6 +130,8 @@
               //wait to remove ? to avoid a single select from briefly setting the model to null
               selectize.removeOption('?');
 
+              syncInputClasses();
+
               var $option = selectize.getOption(0);
               if ($option) selectize.setActiveOption($option);
             }
@@ -145,6 +147,7 @@
             initializing = false;
             element.selectize(opts);
             selectize = element[0].selectize;
+            syncInputClasses();
             if (attrs.ngOptions) {
               if (scope.multiple) {
                 selectize.on('item_add', onItemAddMultiSelect);
@@ -156,6 +159,24 @@
           });
         }
 
+        function syncInputClasses() {
+          var inputClasses = selectize.$input.attr('class').split(' ');
+          var controlClasses = selectize.$control.attr('class').split(' ');
+          var i;
+
+          for (i=0; i < controlClasses.length; i++) {
+            if (controlClasses[i].match(/^ng\-/)) {
+              selectize.$control.removeClass(controlClasses[i]);
+            }
+          }
+
+          for (i=0; i < inputClasses.length; i++) {
+            if (inputClasses[i].match(/^ng\-/)) {
+              selectize.$control.addClass(inputClasses[i]);
+            }
+          }
+        }
+
         function onItemAddMultiSelect(value, $item) {
           var model = ngModelCtrl.$viewValue || [];
           var options = optionsFn(scope.$parent);

test/select.spec.js

@@ -54,6 +54,16 @@ describe('<select selectize>', function() {
           assert.ok(selectize.$wrapper.hasClass('selectize-control'));
         });
 
+        it('should copy the angular classes from the <select> into the selectize-input', function () {
+          var ngClasses = selectize.$wrapper.attr('class').split(' ').filter(function (className) {
+            return className.match(/^ng\-/);
+          });
+
+          ngClasses.forEach(function (className) {
+            assert.ok(selectize.$control.hasClass(className));
+          });
+        });
+
         it('should have the same number of options in the dropdown menu as DOM options', function() {
           assert.strictEqual(selectize.$dropdown_content.children().length, stringOptions.length);
         });
@@ -88,6 +98,16 @@ describe('<select selectize>', function() {
           timeout.flush();
           testSelectedOption('bar');
         });
+
+        it('should the selectize-input angular classes', function () {
+          var ngClasses = selectize.$wrapper.attr('class').split(' ').filter(function (className) {
+            return className.match(/^ng\-/);
+          });
+
+          ngClasses.forEach(function (className) {
+            assert.ok(selectize.$control.hasClass(className));
+          });
+        });
       });
     });