как создать Angularjs Smart-Table с выпадающим фильтром Multi-Selection

Question

Я пытаюсь создать данные таблицы с помощью Angularjs Smart Table с раскрывающимся списком Multi-selection, но когда я пытаюсь заполнить раскрывающийся список, передавая значения данных из извлеченных данных, они не запускаются и не связываются.

Мой взгляд здесь,

<div id="table-scroll" class="table-scroll">

    <table id="main-table"  st-table="display_records" st-filtered-collection st-safe-src="List" st-set-filter="customFilter" class="table listTable table-bordered table-condensed table-hover main-table" style="width:auto; margin-bottom:0px;">
        <thead>
            <tr role="rowheader"               

                <th st-sort="FirstName" id="th7" >FirstName</th>
                <th st-sort="LastName" id="th8">LastName</th>
                <th st-sort="Education" id="th9">Education</th>
            </tr>
            <tr>
            <th>
                    <input st-search="FirstName" placeholder="First Name" class="input-sm form-control" ng-minlength="2" type="search" ng-value="FirstName" ng-model="FirstName" />
                </th>
                <th>
                    <input st-search="LastName" placeholder="LastName" class="input-sm form-control" ng-minlength="2" type="search" ng-value="LastName" ng-model="LastName" />
                </th>
 <th>
          <script type="text/ng-template" id="stSelectMultiple.html">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                {{dropdownLabel}}
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li ng-repeat="item in distinctItems">
                                    <label>
                                        <input type="checkbox" ng-model="item.selected" ng-click="filterChanged()">{{item.Value}}
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </script>
                    <st-select-multiple collection="List" predicate="Education" ></st-select-multiple>

                </th>

            </tr>
        </thead>
        <tbody>
            <tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_records">

                <td>{{row.FirstName}}</td>
                <td>{{row.LastName}}</td>
                <td>{{row.Education}}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>                    

                <td colspan="6" class="text-center">
                    <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="10"></div>
                </td>

                <td colspan="2">
                    <span style="align-content:flex-end; color:white"> items per Page:</span>

                </td>
                <td colspan="1">
                    <div>
                        <select id="itemsByPage" ng-model="itemsByPage" ng-options="number for number in options" class="form-control input-sm"></select>
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

Мой файл скриптов здесь загружает данные, которые я обрабатываю в одном контроллере.

 var App = angular.module("App")
  App.directive('stSelectMultiple', [function () {       
    return {
        restrict: 'E',
        require: '^stTable',
        scope: {
            collection'=',
            predicate: '@',
            predicateExpression: '='
        },
        templateUrl: 'stSelectMultiple.html',
        link: function (scope, element, attr, table) {
            scope.dropdownLabel = '';
            scope.filterChanged = filterChanged;               

            initialize();

            function initialize() {
                bindCollection(List);
            }

            function getPredicate() {
                var predicate = scope.predicate;
                if (!predicate && scope.predicateExpression) {
                    predicate = scope.predicateExpression;
                }
                return predicate;
            }

            function getDropdownLabel() {
                var allCount = scope.distinctItems.length;

                var selected = getSelectedOptions();

                if (allCount === selected.length || selected.length === 0) {
                    return 'All';
                }

                if (selected.length === 1) {
                    return selected[0];
                }

                return selected.length + ' items';
            }

            function getSelectedOptions() {
                var selectedOptions = [];

                angular.forEach(scope.distinctItems, function (item) {
                    if (item.selected) {
                        selectedOptions.push(item.Value);
                    }
                });

                return selectedOptions;
            }

            function bindCollection(collection) {
                var predicate = getPredicate();
                var distinctItems = [];

                angular.forEach(collection, function (item) {
                    var value = item[predicate];
                    fillDistinctItems(value, distinctItems);
                });

                distinctItems.sort(function (obj, other) {
                    if (obj.Value > other.Value) {
                        return 1;
                    } else if (obj.Value < other.Value) {
                        return -1;
                    }
                    return 0;
                });

                scope.distinctItems = distinctItems;

                filterChanged();
            }

            function filterChanged() {
                scope.dropdownLabel = getDropdownLabel();

                var predicate = getPredicate();

                var query = {
                    matchAny: {}
                };

                query.matchAny.items = getSelectedOptions();
                var numberOfItems = query.matchAny.items.length;
                if (numberOfItems === 0 || numberOfItems === scope.distinctItems.length) {
                    query.matchAny.all = true;
                } else {
                    query.matchAny.all = false;
                }

                table.search(query, predicate);
            }

            function fillDistinctItems(Value, distinctItems) {
                if (Value && Value.trim().length > 0 && !findItemWithValue(distinctItems, Value)) {
                    distinctItems.push({
                        Value: Value,
                        selected: true
                    });
                }
            }

            function findItemWithValue(collection, Value) {
                var found = _.find(collection, function (item) {
                    return item.Value === Value;
                });

                return found;
            }
        }
    }
}]).filter('customFilter', ['$filter', function ($filter) {
    var filterFilter = $filter('filter');
    var standardComparator = function standardComparator(obj, text) {
                 text = ('' + text).toLowerCase();
        return ('' + obj).toLowerCase().indexOf(text) > -1;
    };

    return function customFilter(array, expression) {
        function customComparator(actual, expected) {

            var isBeforeActivated = expected.before;
            var isAfterActivated = expected.after;
            var isLower = expected.lower;
            var isHigher = expected.higher;
            var higherLimit;
            var lowerLimit;
            var itemDate;
            var queryDate;

            if (angular.isObject(expected)) {
                //exact match
                if (expected.distinct) {
                    if (!actual || actual.toLowerCase() !== expected.distinct.toLowerCase()) {
                        return false;
                    }

                    return true;
                }

                //matchAny
                if (expected.matchAny) {
                    if (expected.matchAny.all) {
                        return true;
                    }

                    if (!actual) {
                        return false;
                    }

                    for (var i = 0; i < expected.matchAny.items.length; i++) {
                        if (actual.toLowerCase() === expected.matchAny.items[i].toLowerCase()) {
                            return true;
                        }
                    }

                    return false;
                }

                //date range
                if (expected.before || expected.after) {
                    try {
                        if (isBeforeActivated) {
                            higherLimit = expected.before;

                            itemDate = new Date(actual);
                            queryDate = new Date(higherLimit);

                            if (itemDate > queryDate) {
                                return false;
                            }
                        }

                        if (isAfterActivated) {
                            lowerLimit = expected.after;


                            itemDate = new Date(actual);
                            queryDate = new Date(lowerLimit);

                            if (itemDate < queryDate) {
                                return false;
                            }
                        }

                        return true;
                    } catch (e) {
                        return false;
                    }

                } else if (isLower || isHigher) {
                    //number range
                    if (isLower) {
                        higherLimit = expected.lower;

                        if (actual > higherLimit) {
                            return false;
                        }
                    }

                    if (isHigher) {
                        lowerLimit = expected.higher;
                        if (actual < lowerLimit) {
                            return false;
                        }
                    }

                    return true;
                }
                //etc

                return true;

            }
            return standardComparator(actual, expected);
        }

        var output = filterFilter(array, expression, customComparator);
        return output;
    };
}]);

Моя проблема - отдельные элементы не загружаются враскрывающийся фильтр не работает.