Why is not binding to $scope?

Question

Example

So the below template gets loaded as the content for a modal. I can read the scope I've set, but I can't understand how I've not bound the <pagination> to totalItems.

Template.html

<div class="modal-header">
    <h3 class="modal-title">{{$parent.helpName}}</h3>
</div>
<div class="modal-body">
    Page {{currentPage }} of {{totalItems}}
    <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
    <div data-ng-show="page.pageNumber == currentPage" data-ng-repeat="page in $parent.helpPages">
        <ul tabset typeof="pills">
            <li tab data-ng-repeat="subPage in page.pills" data-heading="{{subPage.tabTitle}}">
                <div class="panel panel-default">
                    <div class="panel-body" style="overflow:auto;" data-ng-bind-html="subPage.pillDiv">
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

Controller.js

app.directive('myDirective', function factory (){
    return {
        restrict:   'A',    // IE8 doesn't support 'custom tags'
        template:'<a ng-hide="!overlayName" class="btn btn-primary" ng-click="showHelp(overlayName)">Need Help <i class="fa fa-question-circle"></i></a>',
        controller: function overlayCtrl ($scope, $modal, data) {
            // [A]  overlay control properties
            $scope.helpModal = null;
            $scope.overlayName = __hasOverlay($scope.$parent.step.shortDesc); // Right now, look up the overlay by the shortDesc
            if ($scope.overlayName) $scope.overlayName = $scope.overlayName.help;

            // [B]  overlay control methods
            $scope.showHelp = function (name) {

                data.getHelpOverlay(name).then(function (helpContent) {
                    $scope.helpPages = helpContent;
                    $scope.helpName = name;
                    $scope.helpModal = $modal.open({
                        scope:$scope, controller:function ($scope, $sce) {
                            // the scope I'd expect <pagination>'s model to bound on
                            $scope.currentPage = 1;
                            $scope.totalItems = $scope.$parent.helpPages.length;
                        // other code...
                        },
                        templateUrl:'app/steps/templates/helpOverlay.html',
                        size:'lg'
                    });
                });
            }
        }
    };
});

What gives?!

Answer 1

Edit

I think you misunderstood that total-items is the total pages to be displayed in the pagination control. The total-items is the total number of items in ALL pages. (Guess I should have looked at your question more carefully, but the issue is not that you can't access totalItems, it's that the pagination is showing only one page when you expected it to show 4).

The default value for items-per-page is 10. Therefore, if you only pass in 4 items, it's only going to show 1 page.

Plunker

<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" items-per-page="1"></pagination>