![newsbar angular js fiddle newsbar angular js fiddle](https://1.bp.blogspot.com/-0amTPpdWkKk/VAs_RGVH4JI/AAAAAAAABGc/KeJuR-4OQKc/s72-c/AngularJS.png)
This is how pagination in AngularJS works. Similarly, in the second, third, and fourth pages, the rest of the items are displayed. By using slice() method we displayed 3 rows that are item number 0, 1, and 2. The value of the ‘end’ variable will be 0 + 3 = 3. Support JSFiddle and get extra features Groups, Private fiddles, Ad-free & more JSFiddle is for: Demos for docs Bug reporting (test-case) for Github Issues Presenting code answers on Stack Overflow Live code collaboration Code snippets hosting. It will help us in getting the first index value of the array. For the first page, the value of “curPage” will be 0. We have 10 items in the “itemsDetails” array, this means that the array indexing will range from 0 to 9. We have entered the details of 10 courses and calculating the number of pages by the above-mentioned ceil function gave us 4 pages in total.
![newsbar angular js fiddle newsbar angular js fiddle](https://www.codeproject.com/KB/scripting/709340/Flowchart-internals.png)
We have created a function to calculate the number of pages and then stored the value in the scope variable named “numOfPages”. The line “ems = itemsDetails ” initiates the itemDetails variable.
![newsbar angular js fiddle newsbar angular js fiddle](https://s3.amazonaws.com/media-p.slid.es/uploads/1127547/images/6681833/pasted-from-clipboard.png)
The “maxSize” variable denotes the number of maximum pages allowed in a pagination system. Number of items per page is specified using “itemsPerPage” variable and it is assigned with a value 3 as we want to display 3 items in a page at maximum. The “curPage” is initialized with a value 1, it means whenever the webpage loads it will display the first page as a current-page. This component is sometimes also referred to as Drawer, Sidebar or Offcanvas navigation. If you need a more advanced Side Navbar and more options, see our main SideNav documentation. Side Navbar is a navigation component providing a clear way for navigating complex websites with lots of pages. To display the pagination bar we have used ui.bootstrap as a dependency to the AngularJS application. Responsive Side Navbar built with Bootstrap 5. This allows only three rows to be played on a single webpage and on the last page only one row is displayed. The web page displays all the details of courses available in tabular form.
![newsbar angular js fiddle newsbar angular js fiddle](https://s3.amazonaws.com/codementor_content/LearnAngularJS/batarang.png)