isolated scope data not displaying in directive template

Question

I am building a custom Angular directive to display pagination across my application.

I'm using isolated scope to pass totalNoOfRecords but it's not getting displayed. Any help will be appreciated

Here's my code what I tried so far

Template where I'm calling the directive:

<pagination totalData="111"></pagination>

Directive.js

function pagination() {
    return {
        restrict: 'EA',
        templateUrl: 'template/directives/pagination.html',
        scope: {
            totalData: '@',
        },
        link: dirPaginationControlsLinkFn
    };
}

Directive Template

<span class="pagination-text">
   of {{totalData}} 
</span>

Answer 1

In AngularJS, the scope bindings should be in camelCase in JS and in kebab-case in HTML.

You have to change your HTML from

<pagination totalData="111"></pagination>

to

<pagination total-data="111"></pagination>