Category Pages In AngularJS WordPress Theme

main-featured-image.html

<!-- ... -->
<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>

main-ng-if.html

<search-form></search-form>

<p>Categories:</p>
<ul>
	<li ng-repeat="category in categories">
		<span ng-if="current_category_id && category.ID == current_category_id" ng-bind-html="category.name"></span>
		<a ng-if="!current_category_id || category.ID != current_category_id" href="category/{{category.ID}}" ng-bind-html="category.name"></a>
	</li>
</ul>
<p>{{pageTitle}}</p>
<!-- ... -->

main-updated.html

<search-form></search-form>
<p>Categories:</p>
<ul>
	<li ng-repeat="category in categories">
		<span ng-if="current_category_id && category.ID == current_category_id" ng-bind-html="category.name"></span>
		<a ng-if="!current_category_id || category.ID != current_category_id" href="category/{{category.slug}}" ng-bind-html="category.name"></a>
	</li>
</ul>

<!-- ... -->

main.html

<search-form></search-form>
<p>Categories:</p>
<ul>
	<li ng-repeat="category in categories">
		<a href="category/{{category.ID}}" ng-bind-html="category.name"></a>
	</li>
</ul>
<p>{{pageTitle}}</p>

<!-- .... -->

scripts-controller-updated.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;
		$scope.pageTitle = 'Posts in ' + res[0].name + ':';
		document.querySelector('title').innerHTML = 'Category: ' + res[0].name + ' | AngularJS Demo Theme';

		$http.get('wp-json/posts/?filter[category_name]=' + res[0].name).success(function(res){
			$scope.posts = res;
		});
	});
}]);

//...

scripts-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/' + $routeParams.category).success(function(res){
		$scope.current_category_id = $routeParams.category;
		$scope.pageTitle = 'Posts in ' + res.name + ':';
		document.querySelector('title').innerHTML = 'Category: ' + res.name + ' | AngularJS Demo Theme';

		$http.get('wp-json/posts/?filter[category_name]=' + res.name).success(function(res){
			$scope.posts = res;
		});
	});
}]);
//...

scripts-route.js

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

//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'
	})
	.otherwise({
		redirectTo: '/'
	});
}]);

//...

scripts.js

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

//...

//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){
		$scope.posts = res;
		$scope.pageTitle = 'Latest Posts:';
		document.querySelector('title').innerHTML = 'Home | AngularJS Demo Theme';
	});
}]);

//...

Please refer to the tutorial on 1Fix.io: Category Pages in AngularJS WordPress Theme