pagination-id with track by conflict

Hey, I have a minor bug that I can’t get around. Here’s the markup:

<li dir-paginate="case in casesScope.cases | filter:q | itemsPerPage: pagination.owner.pageSize track by case.caseNo" current-page="pagination.owner.currentPage" pagination-id="owner" class="list-group-item">

and the error that I get is the following:

15:02:18.023 "Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 13 of the expression [case.caseNo : 'owner'] starting at [: 'owner'].
http://errors.angularjs.org/1.2.28/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=13&p3=case.caseNo%20%3A%20'owner'&p4=%3A%20'owner'
minErr/<@http://localhost:5000/bower_components/angular/angular.js:78:12
Parser.prototype.throwError@http://localhost:5000/bower_components/angular/angular.js:10601:1
Parser.prototype.parse@http://localhost:5000/bower_components/angular/angular.js:10554:7
$ParseProvider/this.$get</<@http://localhost:5000/bower_components/angular/angular.js:11407:30
ngRepeatDirective</<.link@http://localhost:5000/bower_components/angular/angular.js:20604:30
nodeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6752:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6146:13
publicLinkFn@http://localhost:5000/bower_components/angular/angular.js:6042:30
dirPaginationLinkFn@http://localhost:5000/bower_components/angular-utils-pagination/dirPagination.js:109:17
nodeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6752:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6146:13
nodeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6746:1
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6146:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6149:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6149:13
nodeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6746:1
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6146:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6149:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6149:13
publicLinkFn@http://localhost:5000/bower_components/angular/angular.js:6042:30
ngViewFillContentFactory/<.link@http://localhost:5000/bower_components/angular-route/angular-route.js:915:7
nodeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6752:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6146:13
publicLinkFn@http://localhost:5000/bower_components/angular/angular.js:6042:30
createBoundTranscludeFn/boundTranscludeFn@http://localhost:5000/bower_components/angular/angular.js:6166:21
controllersBoundTransclude@http://localhost:5000/bower_components/angular/angular.js:6773:18
update@http://localhost:5000/bower_components/angular-route/angular-route.js:865:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:5000/bower_components/angular/angular.js:13093:15
updateRoute/<@http://localhost:5000/bower_components/angular-route/angular-route.js:547:15
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:5000/bower_components/angular/angular.js:11682:31
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:5000/bower_components/angular/angular.js:11682:31
qFactory/ref/<.then/<@http://localhost:5000/bower_components/angular/angular.js:11768:26
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:5000/bower_components/angular/angular.js:12811:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:5000/bower_components/angular/angular.js:12623:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:5000/bower_components/angular/angular.js:12915:13
done@http://localhost:5000/bower_components/angular/angular.js:8450:34
completeRequest@http://localhost:5000/bower_components/angular/angular.js:8664:7
createHttpBackend/</xhr.onreadystatechange@http://localhost:5000/bower_components/angular/angular.js:8603:1
" "<!-- ngRepeat: case in casesScope.cases | filter:q | itemsPerPage: pagination.owner.pageSize track by case.caseNo : 'owner' -->

Seems like an edge case that was not handled. Unless I missed something.

I did try to manually set the id in this manner:

<li dir-paginate="case in casesScope.cases | filter:q | itemsPerPage: pagination.owner.pageSize :owner track by case.caseNo" current-page="pagination.owner.currentPage" class="list-group-item">

but then the controls won’t work:

"pagination directive: the pagination controls (id: owner) cannot be used without the corresponding pagination directive." "<dir-pagination-controls class="ng-isolate-scope" pagination-id="owner">"

How can I have both working together?

[liam-betsworth]

Sure. It was very similar to @ychaker’s expression:

<tr dir-paginate="skill in skills | filter: query | itemsPerPage: 10 track by $index" pagination-id="skillsPagination">

And similarly to @ychaker, I was able to fix it by inserting the pagination id in inverted commas:

<tr dir-paginate="skill in skills | filter: query | itemsPerPage: 10 : 'skillsPagination' track by $index" pagination-id="skillsPagination">

[SaleGajic]

I have the same problem but i didn’t manage to solve it. I have directive:

<div dir-paginate="product in localStorage.favourites |
orderBy : reverse | itemsPerPage : 10 track by product.idItem" pagination-id="products">

And i get error:

Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 16 of the expression [product.idItem : 'products'] starting at [: 'products'].
http://errors.angularjs.org/1.4.7/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=16&p3=product.idItem%20%3A%20'products'&p4=%3A%20'products'
    at REGEX_STRING_REGEXP 

If i remove track by product.idItem part, then it works fine, but i put track by there if user by accidante add one product to favourite list twice, then idItem would not be unique.

What did i do wrong?