How to custom ui.bootstrap for pagination with angular.element

Question

I have this HTML generated by the pagination element:

<ul class="pagination ng-isolate-scope ng-valid" ng-change="gestTrt.pageChanged()" ng-model="gestTrt.currentPage" items-per-page="1" total-items="4" direction-links="false" aria-invalid="false">
  <li class="pagination-page ng-scope" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" ng-repeat="page in pages track by $index" style="">
  <li class="pagination-page ng-scope" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" ng-repeat="page in pages track by $index" style="">
  <li class="pagination-page ng-scope" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" ng-repeat="page in pages track by $index" style="">
  <li class="pagination-page ng-scope active" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" ng-repeat="page in pages track by $index" style="">
</ul>

I want to select each element to add a class. I tried:

angular.forEach(angular.element(document.querySelector(".pagination")).children(), function(value, key){
       value.addClass('active');

But I got "Error: value.addClass is not a function"

Answer 1

The source code for UI pagination is here:

https://github.com/angular-ui/bootstrap/blob/master/src/pagination/pagination.js

AngularJS does jQuery type DOM manipulation with angular.element. The documentation for that is here:

https://docs.angularjs.org/api/ng/function/angular.element

After you have reviewed those, please return with a sample of your HTML and ask a more specific question.

UPDATE

It is easier to add a class to an element using the ng-class directive.

For more information on the ng-class directive see the AngularJS ngClass API Reference

Answer 2

I resolved using angular.element(value);