Using Angular UI pagination with Underscore-JS sorting

controller_fragment.js

    var doIndexController = function ($scope, paginationService) {
        $scope.vm = {
            filterExpression: null,
            filterData: function () {
                var filterExpression = $scope.vm.filterExpression;
                if (!filterExpression) { return; }
                var dataFiltered = _(this.data).filter(function (i) {
                    var title = i.Title;
                    var isContainedInTitle = (title && title.toLowerCase().indexOf(filterExpression) === -1) ? false : true;
                    return isContainedInTitle;
                });
                this.pagination.start(dataFiltered);
            },
            getIsNewValue: function (pubDate) {
                var now = new Date();
                var test1 = ((now.getMonth() - pubDate.getMonth()) <= 2);
                var test2 = (pubDate.getFullYear() === now.getFullYear());
                return (test1 && test2);
            },
            data: [],
            loadData: function () {
                var that = this;
                var set = $scope.clientVM.routeIndexSet;
                var indexMetaId = $scope.clientVM.currrentIndexMetaItem.id;

                switch (set) {
                    case "people":
                    case "time":
                        $scope.clientVM.dataService.loadData("index-" + indexMetaId).then(function (response) {
                            that.data = _(response.data.ChildDocuments)
                                .chain()
                                .filter(function (i) {
                                    return (!_.isUndefined(i) && !_.isNull(i));
                                }).sortBy(function (i) {
                                    return i.CreateDate;
                                })
                                .value()
                                .reverse();
                            that.pagination.start(that.data);
                            that.pagination.isVisible = true;
                            $scope.clientVM.isDataLoaded = true;
                            $scope.clientVM.isSplash = false;
                        });
                        break;
                    default:
                        $scope.clientVM.dataService.loadData("IndexSplash").then(function (response) {
                            that.data = response.data.ChildDocuments;
                            that.pagination.dataSlice = that.data;
                            that.pagination.isVisible = false;
                            $scope.clientVM.isDataLoaded = true;
                            $scope.clientVM.isSplash = true;
                        });
                }
            },
            pagination: paginationService.get()
        };

        $scope.vm.loadData();
    };

partial.html

<div class="IndexFlowItem col-sm-4 col-xs-6" data-ng-if="clientVM.isDataLoaded" data-ng-repeat="i in vm.pagination.dataSlice">
    <div class="Stripe">
        <div class="ItemIsNew" data-ng-if="i.isNew">new!</div>
    </div>
    <div class="Content">
        <p><a href="{{i.Path}}{{i.FileName}}"><span data-ng-bind-html="i.Title"></span></a></p>
    </div>
</div>
<div class="PaginationFlow col-sm-10 col-xs-12" data-ng-if="vm.pagination.isVisible">
    <div class="row" data-ng-if="!clientVM.isDataLoaded">
        <img alt="" class="IndexLoading" src="http://songhay.blob.core.windows.net/design-kintespace/images/preloaders.net.gif" />
    </div>
    <div class="row">
        <pagination class="pagination-sm col-sm-5"
            ng-change="vm.pagination.changed()"
            ng-model="vm.pagination.currentPage"

            items-per-page="vm.pagination.itemsPerPage"
            max-size="vm.pagination.numberOfPagesDisplayed"
            num-pages="vm.pagination.calculatedNumberOfPages"
            rotate="false"
            total-items="vm.pagination.count"

            first-text="&laquo;"
            previous-text="&lsaquo;"
            next-text="&rsaquo;"
            last-text="&raquo;">
        </pagination>
        <form action="#" class="col-sm-3 form-inline">
            <input data-ng-change="vm.filterData()" data-ng-model="vm.filterExpression" type="text" class="form-control" placeholder="filter"
            />
        </form>
    </div>
</div>

service_fragment.js

    var doPaginationService = function () {
        return {
            get: function (options) {
                if (!options) {
                    options = {};
                }
                if (!options.itemsPerPage) {
                    options.itemsPerPage = 6;
                }
                return {
                    calculatedNumberOfPages: 0,
                    changed: function () {
                        this.dataSlice = this.getDataSlice();
                    },
                    currentPage: 1,
                    count: 0,
                    data: [],
                    dataSlice: [],
                    getDataSlice: function () {
                        var startIndex = (this.currentPage - 1) * this.itemsPerPage;
                        var endIndex = startIndex + this.itemsPerPage;
                        return this.data.slice(startIndex, endIndex);
                    },
                    isVisible: false,
                    itemsPerPage: options.itemsPerPage,
                    numberOfPagesDisplayed: 5,
                    start: function (data) {
                        this.data = data;
                        this.count = this.data.length;
                        this.dataSlice = this.getDataSlice();
                    }
                };
            }
        };
    };