１）ページ数の計算、Bootstrap3のpagination属性を使ってページリンク表示
　
１ページ当りの表示件数を基にページ数を計算し、ページ数分のページリンクをBootstrap3のpagination属性を使って表示します。
　
①ページ数の計算
　
itemsPerPageがページ当りの件数で、配列データ数を割ってページ数を求めます。ページ数分のページ番号をリターンします。

$scope.itemsPerPage = 3;
$scope.range = function() {
  $scope.maxPage = Math.ceil($scope.friends.length/$scope.itemsPerPage);
  var ret = [];
  for (var i=1; i<=$scope.maxPage; i++) {
    ret.push(i);
  }
  return ret;
};

　
②Bootstrap3のpagination属性を使ってページリンク表示
　
Bootstrap3のページングの機能http://getbootstrap.com/components/#paginationを使ってページリンクを表示します。
　
上記①で定義したrange()関数を使ってページ番号をリターンし、ページ番号のリンクを表示しています。
ng-repeat="n in range()"

<ul class="pagination">
  <li>
    <a href="#" ng-click="prevPage()">≪ 前へ</a>
  </li>
  <li ng-repeat="n in range()" ng-click="setPage(n)">
    <a href="#">{{n}}</a>
  </li>
  <li>
    <a href="#" ng-click="nextPage()">次へ ≫</a>
  </li>
</ul>

　
２）リンククリック時の動作を定義
　
①現在表示しているページ番号を示す変数の初期値を定義
　
$scope.currentPage = 1;
　
②ページ当りの表示個数
　
<input ng-model="itemsPerPage" type="text">
　
③配列データを表示
　
現在のページ番号$scope.currentPageとページ当りの表示個数を指定して、指定したページのデータを表示します。上記（１）のサンプルコードを同じ仕組みです。
　
<tr ng-repeat="item in friends | offset: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage">
　
④ページ番号リンククリック時の動作を定義
　
ページ番号をクリックすると$scope.currentPageにそのページ番号を設定します。これで上記③のオフセットが変更され、指定したページのデータを表示出来ます。

（HTML）
<li ng-repeat="n in range()" ng-click="setPage(n)">
  <a href="#">{{n}}</a>
</li>
（スクリプト）
$scope.setPage = function(n) {
  $scope.currentPage = n;
};

　
⑤前後のページへのリンク押下時の動作定義
　
上記④と同様に$scope.currentPageの値を更新します。
（ビュー）

<a href="#" ng-click="prevPage()">≪ 前へ</a>
<a href="#" ng-click="nextPage()">次へ ≫</a>

（スクリプト）
$scope.prevPage = function() {
  if ($scope.currentPage > 1) {
    $scope.currentPage--;
  }
};
$scope.nextPage = function() {
  if ($scope.currentPage < maxPage) {
    $scope.currentPage++;
  }
};

現在表示しているページのページリンクの色を変える、先頭ページを表示している場合は"前へ"のリンクを、最後のページを表示している場合は"次へ"のリンクを無効にするように設定します。
　
AngularJSのng-classを使ってBootstrap3のpagenationのactive、disableを動的に設定して切替えます。
　
①現在表示しているページ番号のリンクをアクティブにする
　
AngularJSのng-classを使って、リンクのページ番号nと現在表示しているページ番号currentPageが等しい場合は、"active"のCSSクラスを動的に追加し、色を変更できます。
　
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
　
②前後のページへのリンクの有効、無効を切替え
　
上記①と同様にng-classを使って、現在のページが先頭または最後かどうかチェックし、マッチした場合は、"disabled"のCSSクラスを動的に追加し、リンクを無効にします。

（HTML）
<ul class="pagination">
  <li ng-class="prevPageDisabled()">
    <a href="#" ng-click="prevPage()">≪ 前へ</a>
  </li>
　　：
  <li ng-class="nextPageDisabled()">
    <a href="#" ng-click="nextPage()">次へ ≫</a>
  </li>
</ul>
　
（スクリプト）
$scope.prevPageDisabled = function() {
  return $scope.currentPage === 1 ? "disabled" : "";
};

$scope.nextPageDisabled = function() {
  return $scope.currentPage === $scope.maxPage ? "disabled" : "";
};