var app = angular.module('ngpdfviewerApp', [ 'ngPDFViewer' ]);
app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, pdf) {
$scope.viewer = pdf.Instance("viewer");
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
}]);
<!DOCTYPE html>
<html ng-app="ngpdfviewerApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.5/angular.js" data-semver="1.2.5"></script>
<script src="https://rawgithub.com/akrennmair/ng-pdfviewer/ed053c7c8030fee678d8c854376b55d8de42b76d/dist/ng-pdfviewer.min.js"></script>
<script src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.worker.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="TestCtrl">
<button ng-click="prevPage()"><</button>
<button ng-click="nextPage()">></button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer src="http://cdn.mozilla.net/pdfjs/helloworld.pdf" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
</body>
</html>
/* Put your css in here */