Watch the allowClear attribute for changes

src/common.css

@@ -36,7 +36,7 @@
     display:none;
 }
 
-body > .select2-container {
+body > .select2-container.open {
   z-index: 9999; /* The z-index Select2 applies to the select2-drop */
 }
 
@@ -120,7 +120,7 @@ body > .select2-container {
   margin-top: -1px;
 }
 
-body > .ui-select-bootstrap {
+body > .ui-select-bootstrap.open {
   z-index: 1000; /* Standard Bootstrap dropdown z-index */
 }
 

src/uiSelectMatchDirective.js

@@ -16,7 +16,12 @@ uis.directive('uiSelectMatch', ['uiSelectConfig', function(uiSelectConfig) {
         $select.placeholder = placeholder !== undefined ? placeholder : uiSelectConfig.placeholder;
       });
 
-      $select.allowClear = (angular.isDefined(attrs.allowClear)) ? (attrs.allowClear === '') ? true : (attrs.allowClear.toLowerCase() === 'true') : false;
+      function setAllowClear(allow) {
+        $select.allowClear = (angular.isDefined(allow)) ? (allow === '') ? true : (allow.toLowerCase() === 'true') : false;
+      }
+
+      attrs.$observe('allowClear', setAllowClear);
+      setAllowClear(attrs.allowClear);
 
       if($select.multiple){
         $select.sizeSearchInput();

test/select.spec.js

@@ -94,7 +94,8 @@ describe('ui-select tests', function() {
   }
 
   function createUiSelect(attrs) {
-    var attrsHtml = '';
+    var attrsHtml = '',
+        matchAttrsHtml = '';
     if (attrs !== undefined) {
       if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; }
       if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; }
@@ -104,11 +105,12 @@ describe('ui-select tests', function() {
       if (attrs.taggingTokens !== undefined) { attrsHtml += ' tagging-tokens="' + attrs.taggingTokens + '"'; }
       if (attrs.title !== undefined) { attrsHtml += ' title="' + attrs.title + '"'; }
       if (attrs.appendToBody != undefined) { attrsHtml += ' append-to-body="' + attrs.appendToBody + '"'; }
+      if (attrs.allowClear != undefined) { matchAttrsHtml += ' allow-clear="' + attrs.allowClear + '"';}
     }
 
     return compileTemplate(
       '<ui-select ng-model="selection.selected"' + attrsHtml + '> \
-        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+        <ui-select-match placeholder="Pick one..."' + matchAttrsHtml + '>{{$select.selected.name}}</ui-select-match> \
         <ui-select-choices repeat="person in people | filter: $select.search"> \
           <div ng-bind-html="person.name | highlight: $select.search"></div> \
           <div ng-bind-html="person.email | highlight: $select.search"></div> \
@@ -296,6 +298,43 @@ describe('ui-select tests', function() {
     expect($select.open).toEqual(false);
   });
 
+  it('should clear selection', function() {
+    scope.selection.selected = scope.people[0];
+
+    var el = createUiSelect({theme : 'select2', allowClear: 'true'});
+    var $select = el.scope().$select;
+
+    // allowClear should be true.
+    expect($select.allowClear).toEqual(true);
+
+    // Trigger clear.
+    el.find('.select2-search-choice-close').click();
+    expect(scope.selection.selected).toEqual(undefined);
+
+    // If there is no selection it the X icon should be gone.
+    expect(el.find('.select2-search-choice-close').length).toEqual(0);
+
+  });
+
+  it('should toggle allow-clear directive', function() {
+    scope.selection.selected = scope.people[0];
+    scope.isClearAllowed = false;
+
+    var el = createUiSelect({theme : 'select2', allowClear: '{{isClearAllowed}}'});
+    var $select = el.scope().$select;
+
+    expect($select.allowClear).toEqual(false);
+    expect(el.find('.select2-search-choice-close').length).toEqual(0);
+
+    // Turn clear on
+    scope.isClearAllowed = true;
+    scope.$digest();
+
+    expect($select.allowClear).toEqual(true);
+    expect(el.find('.select2-search-choice-close').length).toEqual(1);
+  });
+
+
   it('should pass tabindex to focusser', function() {
     var el = createUiSelect({tabindex: 5});