controllers.js

$scope.slickLeadConfig = {
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		asNavFor: '.thumb-swatches'
	};

	$scope.slickThumbSwatches = {
		slidesToShow: 1,
		slidesToScroll: 1,
		rows: 2,
		slidesPerRow: 4,
		asNavFor: 'lead-swatch',
		method: {},
		dots: true,
		arrows: false
	};

view

<slick class="lead-swatch" settings="slickLeadConfig">
			<div ng-repeat="swatch in sofa.swatchUrList">
				<img class="center-block" ng-src ="{{swatch}}">
			</div>
		</slick>
		<div class="swatches">
			<p class="text-center">Available in these swatches</p>
			<slick class="thumb-swatches" settings="slickThumbSwatches">
				<div ng-repeat="swatch in sofa.swatchUrList">
					<img class="center-block swatch" ng-src ="{{swatch}}" ng-click="slickThumbSwatches.method.slickGoTo(2)">
				</div>
			</slick>
		</div>