Previous / Next Posts Links In AngularJS WordPress Theme

main.html

<!-- ... -->
<p>{{pageTitle}}</p>
<ul>
	<li ng-repeat="post in posts">
		<a href="blog/{{post.ID}}" ng-bind-html="post.title"></a>
		<a href="blog/{{post.ID}}" ng-if="post.featured_image.attachment_meta.sizes.thumbnail.url"><img ng-src="{{post.featured_image.attachment_meta.sizes.thumbnail.url}}" alt="{{post.featured_image.title}}" /></a>
		<div ng-bind-html="post.excerpt"></div>
	</li>
</ul>
<posts-nav-link prev-label="&laquo; Previous Page" next-label="Next Page &raquo;"></posts-nav-link>

posts-nav-link.html

<div class="posts-nav-link">
	<a ng-if="currentPage>1" href="{{postsNavLink.prevLink}}" class="prev-link">{{postsNavLink.prevLabel}}</a>
	<span ng-if="currentPage>1 && currentPage<totalPages" class="sep">{{postsNavLink.sep}}</span>
	<a ng-if="currentPage<totalPages" href="{{postsNavLink.nextLink}}" class="next-link">{{postsNavLink.nextLabel}}</a>
</div>

scripts-category-controller.js

// ...

//Category controller
app.controller('Category', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
	$http.get('wp-json/taxonomies/category/terms').success(function(res){
		$scope.categories = res;
	});

	$http.get('wp-json/taxonomies/category/terms/?filter[slug]=' + $routeParams.category).success(function(res){
		$scope.current_category_id = res[0].ID;
		var currentPage = ( ! $routeParams.page ) ? 1 : parseInt( $routeParams.page );
		$scope.pageTitle = 'Posts in ' + res[0].name + ' Page ' + currentPage + ':';
		document.querySelector('title').innerHTML = 'Category: ' + res[0].name + ' | AngularJS Demo Theme';

		var request = 'wp-json/posts/?filter[category_name]=' + res[0].name;
		if ( $routeParams.page ) {
			request += '&page=' + $routeParams.page;
		}
		$http.get(request).success(function(res, status, headers){
			$scope.posts = res;

			$scope.currentPage = currentPage;
			$scope.totalPages = headers('X-WP-TotalPages');
		});
	});
}]);

// ...

scripts-main-controller.js

// ...

//Main controller
app.controller('Main', ['$scope', '$http', function($scope, $http) {
	$http.get('wp-json/taxonomies/category/terms').success(function(res){
		$scope.categories = res;
	});

	$http.get('wp-json/posts/').success(function(res, status, headers){
		$scope.posts = res;
		$scope.pageTitle = 'Latest Posts:';
		document.querySelector('title').innerHTML = 'Home | AngularJS Demo Theme';

		$scope.currentPage = 1;
		$scope.totalPages = headers('X-WP-TotalPages');
	});
}]);

// ...

scripts-paged-controller.js

// ...

//Paged controller
app.controller('Paged', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
	$http.get('wp-json/taxonomies/category/terms').success(function(res){
		$scope.categories = res;
	});

	$http.get('wp-json/posts/?page=' + $routeParams.page).success(function(res, status, headers){
		var currentPage = parseInt($routeParams.page);
		$scope.currentPage = currentPage;
		$scope.totalPages = headers('X-WP-TotalPages');

		$scope.posts = res;
		$scope.pageTitle = 'Posts on Page ' + $scope.currentPage + ':';
		document.querySelector('title').innerHTML = 'Page ' + $scope.currentPage + ' | AngularJS Demo Theme';
	});
}]);

// ...

scripts-posts-nav-link.js

// ...

//postsNavLink Directive
app.directive('postsNavLink', function() {
	return {
		restrict: 'EA',
		templateUrl: myLocalized.partials + 'posts-nav-link.html',
		controller: ['$scope', '$element', '$routeParams', function( $scope, $element, $routeParams ){
			var currentPage = ( ! $routeParams.page ) ? 1 : parseInt( $routeParams.page ),
			linkPrefix = ( ! $routeParams.category ) ? 'page/' : 'category/' + $routeParams.category + '/page/';

			$scope.postsNavLink = {
				prevLink: linkPrefix + ( currentPage - 1 ),
				nextLink: linkPrefix + ( currentPage + 1 ),
				sep: ( ! $element.attr('sep') ) ? '|' : $element.attr('sep'),
				prevLabel: ( ! $element.attr('prev-label') ) ? 'Previous Page' : $element.attr('prev-label'),
				nextLabel: ( ! $element.attr('next-label') ) ? 'Next Page' : $element.attr('next-label')
			};
		}]
	};
});

scripts-route.js

var app = angular.module('app', ['ngRoute', 'ngSanitize', 'slick']);

//Config the route
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
	$locationProvider.html5Mode(true);

	$routeProvider
	.when('/', {
		templateUrl: myLocalized.partials + 'main.html',
		controller: 'Main'
	})
	.when('/blog/:ID', {
		templateUrl: myLocalized.partials + 'content.html',
		controller: 'Content'
	})
	.when('/category/:category/', {
		templateUrl: myLocalized.partials + 'main.html',
		controller: 'Category'
	})
	.when('/category/:category/page/:page', {
		templateUrl: myLocalized.partials + 'main.html',
		controller: 'Category'
	})
	.when('/page/:page', {
		templateUrl: myLocalized.partials + 'main.html',
		controller: 'Paged'
	})
	.otherwise({
		redirectTo: '/'
	});
}]);

// ...

scripts-search-form.js

// ...

//searchForm Directive
app.directive('searchForm', function() {
	return {
		restrict: 'EA',
		template: 'Search Keyword: <input type="text" name="s" ng-model="filter.s" ng-change="search()">',
		controller: ['$scope', '$http', function ( $scope, $http ) {
			$scope.filter = {
				s: ''
			};
			$scope.search = function() {
				$http.get('wp-json/posts/?filter[s]=' + $scope.filter.s + '&filter[posts_per_page]=-1').success(function(res){
					$scope.posts = res;
					$scope.pageTitle = 'Search Results:';

					$scope.currentPage = 1;
					$scope.totalPages = 1;
				});
			};
		}]
	};
});

// ...

The original blog post: Pagination in AngularJS WordPress Theme