Added uiSelectFooter directive for bottom of list

examples/demo.html

@@ -78,7 +78,7 @@ <h3>Bootstrap theme</h3>
     </ui-select-choices>
   </ui-select>
 
-  <h3>Select2 theme</h3>
+  <h3>Select2 theme (with optional footer)</h3>
   <p>Selected: {{person.selected}}</p>
   <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
@@ -89,6 +89,7 @@ <h3>Select2 theme</h3>
         age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
       </small>
     </ui-select-choices>
+    <ui-select-footer>{{$select.items.length}} people</ui-select-footer>
   </ui-select>
 
   <h3>Selectize theme</h3>

src/bootstrap/select.tpl.html

@@ -10,4 +10,5 @@
          ng-model="$select.search"
          ng-show="$select.searchEnabled && $select.open">
   <div class="ui-select-choices"></div>
+  <div class="ui-select-footer"></div>
 </div>

src/select2/select.tpl.html

@@ -17,5 +17,6 @@
              ng-model="$select.search">
     </div>
     <div class="ui-select-choices"></div>
+    <div class="ui-select-footer"></div>
   </div>
 </div>

src/selectize/select.tpl.html

@@ -13,4 +13,5 @@
            aria-label="{{ $select.baseTitle }}">
   </div>
   <div class="ui-select-choices"></div>
+  <div class="ui-select-footer"></div>
 </div>

src/uiSelectDirective.js

@@ -192,6 +192,13 @@ uis.directive('uiSelect',
             throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-choices but got '{0}'.", transcludedChoices.length);
           }
           element.querySelectorAll('.ui-select-choices').replaceWith(transcludedChoices);
+
+          var transcludedFooter = transcluded.querySelectorAll('.ui-select-footer');
+          transcludedFooter.removeAttr('ui-select-footer');
+          if (transcludedFooter.length > 1) {
+              throw uiSelectMinErr('transcluded', "Expected 0 or 1 .ui-select-footer but got '{0}'.", transcludedFooter.length);
+          }
+          element.querySelectorAll('.ui-select-footer').replaceWith(transcludedFooter);
         });
 
         // Support for appending the select field to the body when its open

src/uiSelectFooterDirective.js

@@ -0,0 +1,8 @@
+uis.directive('uiSelectFooter', function () {
+    return {
+        template: '<div class="ui-select-footer" ng-transclude></div>',
+        restrict: 'EA',
+        transclude: true,
+        replace: true
+    };
+});

test/select.spec.js

@@ -137,6 +137,7 @@ describe('ui-select tests', function() {
           <div ng-bind-html="person.name | highlight: $select.search"></div> \
           <div ng-bind-html="person.email | highlight: $select.search"></div> \
         </ui-select-choices> \
+        <ui-select-footer>{{$select.items.length}} people</ui-select-footer> \
       </ui-select>'
     );
   }
@@ -145,6 +146,10 @@ describe('ui-select tests', function() {
     return $(el).find('.ui-select-match > span:first > span[ng-transclude]:not(.ng-hide)').text();
   }
 
+    function getFooter(el) {
+        return $(el).find('.ui-select-footer').text();
+    }
+
   function clickItem(el, text) {
 
     if (!isDropdownOpened(el)){
@@ -326,13 +331,23 @@ describe('ui-select tests', function() {
     expect(choicesContentEl.length).toEqual(1);
 
     var choicesContainerEl = $(el).find('.ui-select-choices');
-    expect(choicesContainerEl.length).toEqual(1);
+      expect(choicesContainerEl.length).toEqual(1);
+
+      var footerContainerEL = $(el).find('.ui-select-footer');
+      expect(footerContainerEL.length).toEqual(1);
 
     openDropdown(el);
     var choicesEls = $(el).find('.ui-select-choices-row');
     expect(choicesEls.length).toEqual(8);
   });
 
+    it('should properly compile transcluded footer', function() {
+        var el = createUiSelect();
+        openDropdown(el);
+
+        expect(getFooter(el)).toEqual('8 people');
+    });
+
   it('should correctly render initial state', function() {
     scope.selection.selected = scope.people[0];