Adding Slick Carousel To Your AngularJS WordPress Theme

content.html

<h1 ng-bind-html="post.title"></h1>
<slick dots="true" autoplay="true" slides-to-show="1" slides-to-scroll="1" init-onload="true" data="media" style="width:300px">
	<div ng-if="image.is_image" ng-repeat="image in media">
		<img alt="{{image.title}}" ng-src="{{image.attachment_meta.sizes.medium.url}}" />
	</div>
</slick>
<div ng-bind-html="post.content"></div>

functions.php

<?php

function my_scripts() {

	//...

	wp_register_script(
		'angularjs-slick',
		get_stylesheet_directory_uri() . '/bower_components/angular-slick/dist/slick.min.js'
	);

	wp_register_script(
		'slick-carousel',
		get_stylesheet_directory_uri() . '/bower_components/slick-carousel/slick/slick.min.js'
	);

	wp_register_script(
		'my-jquery',
		get_stylesheet_directory_uri() . '/bower_components/jquery/dist/jquery.min.js'
	);

	wp_enqueue_script(
		'my-scripts',
		get_stylesheet_directory_uri() . '/js/scripts.min.js',
		array( 'my-jquery', 'angularjs', 'angularjs-route', 'angularjs-sanitize', 'slick-carousel', 'angularjs-slick' )
	);

	wp_enqueue_style(
		'slick-css',
		get_stylesheet_directory_uri() . '/bower_components/slick-carousel/slick/slick.css'
	);

	//...
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

//...

add_filter( 'query_vars', function( $query_vars ) {
	$query_vars[] = 'post_parent';
	return $query_vars;
});

//...

scripts.js

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

//...

//Content controller
app.controller('Content', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
	$http.get('wp-json/posts/' + $routeParams.ID).success(function(res){
		$scope.post = res;
		document.querySelector('title').innerHTML = res.title + ' | AngularJS Demo Theme';
	});

	$http.get('wp-json/media?filter[post_parent]=' + $routeParams.ID).success(function(res){
		if ( res.length > 1 ) {
			$scope.media = res;
		}
	});
}]);

//...