Added ui-scroll

src/bootstrap/choices.tpl.html

@@ -1,10 +1,11 @@
 <ul class="ui-select-choices ui-select-choices-content dropdown-menu"
     role="listbox"
-    ng-show="$select.items.length > 0">
+    ng-show="$select.items.length > 0 || uiScrollLoading"
+    ng-class="{ 'ui-select-choices-loading-empty': $select.items.length === 0 && uiScrollLoading }">
   <li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" >
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
     <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind-html="$group.name"></div>
-    <div id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row" 
+    <div id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row"
     ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" role="option">
       <a href="javascript:void(0)" class="ui-select-choices-row-inner"></a>
     </div>

src/select.css

@@ -184,3 +184,16 @@
 .ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
     border-color: #D44950;
 }
+
+/* ui-scroll support */
+
+.ui-select-bootstrap > .ui-scroll-viewport-container {
+  padding: 0;
+}
+
+/*
+* #1 - Height is determined by container height - border;
+*/
+.ui-select-bootstrap > .ui-select-choices > .ui-scroll-viewport {
+  height: 198px; /* #1 */
+}

src/select.js

@@ -234,6 +234,10 @@
         $timeout(function() {
           ctrl.search = initSearchValue || ctrl.search;
           _searchInput[0].focus();
+
+          if(ctrl.useUiScroll) {
+            $scope.uiScroll.datasource.update();
+          }
         });
       }
     };
@@ -299,6 +303,10 @@
           }
         }
 
+        if(ctrl.useUiScroll && !ctrl.infinite && ctrl.open) {
+          $scope.uiScroll.datasource.update();
+        }
+
       });
 
       if (ctrl.multiple){
@@ -338,6 +346,15 @@
         _refreshDelayPromise = $timeout(function() {
           $scope.$eval(refreshAttr);
         }, ctrl.refreshDelay);
+      } else if(ctrl.useUiScroll && ctrl.infinite && ctrl.open) {
+        if (_refreshDelayPromise) {
+          $timeout.cancel(_refreshDelayPromise);
+        }
+
+        _refreshDelayPromise = $timeout(function() {
+          ctrl.items = [];
+          $scope.uiScroll.datasource.update();
+        }, ctrl.refreshDelay);
       }
     };
 
@@ -542,6 +559,50 @@
       }, 0, false);
     };
 
+    ctrl.initUiScrollSupport = function() {
+      $scope.uiScroll = {};
+      $scope.uiScroll.datasource = {
+        current: 0,
+        revision: function() {
+          return $scope.uiScroll.datasource.current;
+        },
+        update: function() {
+          $scope.uiScroll.datasource.current += 1;
+        },
+        get: function(index, count, success) {
+          var start, actualCount;
+
+          // Start from 0
+          index = index - 1;
+          if(index + count < 0) {
+            success([]);
+          } else {
+            // Get smallest index. We don't want scroll up support
+            start = Math.max(0, index);
+            actualCount = count - Math.abs(index - start);
+
+            // If using infinite scrolling, call it's callback
+            if((ctrl.infinite && ctrl.items.length > 0) || (ctrl.infinite && $scope.uiScroll.datasource.current > 1 && ctrl.items.length === 0)) {
+              // Maybe wanted items are already loaded?
+              if(index + count > ctrl.items.length) {
+                return ctrl.infiniteCallback($scope.$parent, {
+                  index: start,
+                  count : actualCount,
+                  callback: success,
+                  search: ctrl.search
+                });
+              } else {
+                return success(ctrl.items.slice(start, start + actualCount));
+              }
+            }
+
+            // Return slice of list
+            return success(ctrl.items.slice(start, start + actualCount));
+          }
+        }
+      };
+    };
+
     function _handleDropDownSelection(key) {
       var processed = true;
       switch (key) {
@@ -1210,8 +1271,8 @@
   }])
 
   .directive('uiSelectChoices',
-    ['uiSelectConfig', 'RepeatParser', 'uiSelectMinErr', '$compile',
-    function(uiSelectConfig, RepeatParser, uiSelectMinErr, $compile) {
+    ['uiSelectConfig', 'RepeatParser', 'uiSelectMinErr', '$compile', '$parse',
+    function(uiSelectConfig, RepeatParser, uiSelectMinErr, $compile, $parse) {
 
     return {
       restrict: 'EA',
@@ -1232,6 +1293,23 @@
 
           // var repeat = RepeatParser.parse(attrs.repeat);
           var groupByExp = attrs.groupBy;
+          $select.useUiScroll = angular.isDefined(attrs.scrollable);
+          $select.infinite = angular.isDefined(attrs.infinite);
+
+          if($select.useUiScroll && groupByExp) {
+            throw uiSelectMinErr('support', "ui-scroll is not supported with grouping");
+          }
+
+          if($select.useUiScroll && angular.isDefined(attrs.refresh)) {
+            throw uiSelectMinErr('support', "refreshing should be handled with infinite callback");
+          }
+
+          if($select.useUiScroll) {
+            $select.initUiScrollSupport();
+          }
+          if($select.infinite) {
+            $select.infiniteCallback = $parse(attrs.infinite);
+          }
 
           $select.parseRepeatAttr(attrs.repeat, groupByExp); //Result ready at $select.parserResult
 
@@ -1249,9 +1327,23 @@
             throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row but got '{0}'.", choices.length);
           }
 
-          choices.attr('ng-repeat', RepeatParser.getNgRepeatExpression($select.parserResult.itemName, '$select.items', $select.parserResult.trackByExp, groupByExp))
-              .attr('ng-if', '$select.open') //Prevent unnecessary watches when dropdown is closed
-              .attr('ng-mouseenter', '$select.setActiveItem('+$select.parserResult.itemName +')')
+          if($select.useUiScroll) {
+
+            element.addClass('ui-scroll-viewport-container');
+            element.children().wrapAll('<div ui-scroll-viewport class="ui-scroll-viewport" />');
+
+            choices.attr('ui-scroll', $select.parserResult.itemName + ' in uiScroll.datasource');
+
+            if(angular.isDefined(attrs.infiniteLoader)) {
+              var wrapper = element.querySelectorAll('.ui-scroll-viewport');
+              choices.attr('is-loading', 'uiScrollLoading');
+              wrapper.append('<div class="ui-scroll-loader" ng-if="uiScrollLoading">' + attrs.infiniteLoader + '</div>');
+            }
+          } else {
+            choices.attr('ng-repeat', RepeatParser.getNgRepeatExpression($select.parserResult.itemName, '$select.items', $select.parserResult.trackByExp, groupByExp));
+          }
+
+          choices.attr('ng-mouseenter', '$select.setActiveItem('+$select.parserResult.itemName +')')
               .attr('ng-click', '$select.select(' + $select.parserResult.itemName + ',false,$event)');
 
           var rowsInner = element.querySelectorAll('.ui-select-choices-row-inner');

src/select2/choices.tpl.html

@@ -1,4 +1,6 @@
-<ul class="ui-select-choices ui-select-choices-content select2-results">
+<ul class="ui-select-choices ui-select-choices-content select2-results"
+    ng-show="$select.items.length > 0 || uiScrollLoading"
+    ng-class="{ 'ui-select-choices-loading-empty': $select.items.length === 0 && uiScrollLoading }">
   <li class="ui-select-choices-group" ng-class="{'select2-result-with-children': $select.choiceGrouped($group) }">
     <div ng-show="$select.choiceGrouped($group)" class="ui-select-choices-group-label select2-result-label" ng-bind-html="$group.name"></div>
     <ul role="listbox"

src/selectize/choices.tpl.html

@@ -1,4 +1,6 @@
-<div ng-show="$select.open" class="ui-select-choices selectize-dropdown single">
+<div ng-show="$select.open && ($select.items.length > 0 || uiScrollLoading)"
+     class="ui-select-choices selectize-dropdown single"
+     ng-class="{ 'ui-select-choices-loading-empty': $select.items.length === 0 && uiScrollLoading }">
   <div class="ui-select-choices-content selectize-dropdown-content">
     <div class="ui-select-choices-group optgroup" role="listbox">
       <div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header" ng-bind-html="$group.name"></div>