“Angular-ui bootstrap”を使用して、Bootstrap3のJavaScript部分をAngularJSに置き換えることができます。今回はpaginationのサンプルを作成しました。
※オンラインマニュアル
Angular directives for Bootstrap
Angular-ui bootstrap : 2.5.0
AngularJS : 1.6.5
Bootstrap : 3.3.7
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
......
<script src="../js/angular-1.6.5.min.js"></script>
<script src="../js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<link href="../js/app.js">
<link href="../css/bootstrap-3.3.7.min.css" rel="stylesheet">
</head>
.....
<div ng-controller="PaginationDemoCtrl">
<ul uib-pagination total-items="totalitems"
ng-model="currentpage"
max-size="maxsize"
items-per-page="itemsperpage"
class="pagination-sm"
previous-text="前へ"
next-text="次へ"
first-text="最初"
last-text="最後"
boundary-links="true">
</ul>
<ul>
<li ng-repeat="item in currentitems">
<p>{{item.id}}：{{item.content}}</p>
</li>
</ul>
<ul uib-pagination total-items="totalitems"
ng-model="currentpage"
max-size="maxsize"
items-per-page="itemsperpage"
class="pagination-sm"
previous-text="前へ"
next-text="次へ"
first-text="最初"
last-text="最後"
boundary-links="true"
rotate="false">
</ul>
</div>
var demoApp = angular.module('demoApp', ['ui.bootstrap']);
demoApp.controller("PaginationDemoCtrl", function($scope) {
$scope.items = [
{id:1,content: "記事１の中身です。"},
{id:2,content: "記事２の中身です。"},
・・・・
{id:30,content: "記事３０の中身です。"}
];
$scope.maxsize = 5;
$scope.itemsperpage = 2;
$scope.totalitems = $scope.items.length;
$scope.currentpage = 1;
var start = 0;
var end = start + $scope.itemsperpage;
$scope.currentitems = $scope.items.slice(start,end);
$scope.$watch('currentpage', function() {
start = ($scope.currentpage - 1) * $scope.itemsperpage;
end = start + $scope.itemsperpage;
$scope.currentitems = $scope.items.slice(start,end);
},true);
});