Can't get the filtered items from my filtered list inside a modal

Question

I have a page where I can open a modal window when selecting a certain "instruction"
When that modal window is loaded, I have inside of it a text input for searching, an ordered list to list all of the "instructions" (except the one I selected), a dropdown list to select the amount of instructions I want to see per page, 2 buttons for next and previous page as well as text showing the current page and how many page there is.

This is what it looks like (the Manual dropdown list does nothing for now)

So far, I get all my instructions just right, my filter work, the result per page works, the next and previous button change the page... but it seems like my numberOfPages function isn't working.

This is the modal HTML page:

<div>
        Search: <input type="text" ng-model="search.Description"/> Manual: 
        <select ng-options="manual.Description for manual in manuals">

        </select>
    </div>
    <br />
    <div class="table clearfix" style="max-width: 800px; max-height: 300px; overflow: scroll;">
        <ol class="table-body clearfix">
            <li class="table-row clearfix" ng-repeat="item in ( filteredItems = ( instructions | filter:search:strict)) | startFrom:currentPage*showLimit | limitTo:showLimit" ng-include="'js/manuals/manuals-item-instruction-attachment-showInstruction.html'"></li>
        </ol>

    </div>
    <div>
        <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
            Page: {{currentPage + 1}}/{{numberOfPages()}}
        <button ng-disabled="currentPage >= numberOfPages() - 1" ng-click="currentPage=currentPage + 1">Next</button>
        Results per page:
        <select ng-model="showLimit">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </div>

This is the function where my modal is created and opened

openreference: function (item) {
    var modalInstance = $modal.open({
        templateUrl: 'js/manuals/manuals-item-instruction-attachment.html',
        controller: ModalInstanceCtrl,
        resolve: {
            instruction: function () {
                return item;
            }
        }
    });
    modalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
    },
    function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
}

And this is my modal controller

var ModalInstanceCtrl = function ($scope, $modalInstance, instruction) {
    $scope.showLimit = 10;
    $scope.currentPage = 0;
    $scope.numberOfPages = function () {
        if ($scope.currentPage + 1 > Math.ceil($scope.filteredItems.length / $scope.showLimit)) {
            $scope.currentPage = 0;
        }
        return Math.ceil($scope.filteredItems.length / $scope.showLimit);
    }
    $http({ method: 'GET', url: '../api/Instructions/GetAllOtherInstructions', params: { 'instructionId': instruction.Id} }).success(function (result) {
        $scope.instructions = result;
    });
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

After debugging, my filteredItems in the numberOfPages function was always undefined no matter where I tried to place the numberOfPages function in my code.

Why are my filteredItems from the ng-repeat always undefined? I have the same thing in a non-modal page and it's working perfectly fine.

Answer 1

In reply to the comment, try creating an object to hold the filteredItems property. That will inherit and the property will be created on the parent object:

$scope.data = { };

html:

<li class="table-row clearfix" 
    ng-repeat="item in ( data.filteredItems = ( instructions | filter:search:strict)) | startFrom:currentPage*showLimit | limitTo:showLimit" 
    ng-include="'js/manuals/manuals-item-instruction-attachment-showInstruction.html'"></li>