Use Owl Carousel 2 with angular

angular-owl-carousel-2.js

angular.module("angular-owl-carousel", [])
	.controller("FirstCtr", function() {

		// Options for firstCarosel 
		this.carouselOptions = { id: 'firstCarousel' };

		// The carosel items
		this.items  = ['1','2','3','4'];

}).controller("SecondCtr",['$scope', function($scope) {

		// Options for secondCarousel
		this.carouselOptions = { 
			id: 'secondCarousel', 
			margin: 20,
			stagePadding:20,
			responsive: { 
				0	:{ items:3 }, 
				600	:{ items:4 }, 
				1366	:{ items:6 }, 
				1600	:{ items:7 } 
			} 
		}

		// The carosel items
		this.items = [{ name:'1' },{ name:'2' },{ name:'3' },{ name:'4' }];

		// Let emite events to the carosel...
		this.emit = function(action) { 
			$scope.$broadcast('carousel.' + this.carouselOptions.id, action); 
		}

// Angular Directive's for Owl Carosuel 2
//--------------------------------------------------------------------------------------
}]).directive("owlCarousel", function() {
	return {
		restrict: 'EA',	
		scope: { owlOptions: '=' },
		transclude: false,
		controller: ['$scope', '$element', function(scope, element) {

			var carousel = null;
			var $element = $(element);
			var options = angular.extend({}, scope.owlOptions);

			// Clean existing carousel.
			this.CarouselDestroy = function() {
				$element.find('.owl-stage-outer').remove();
				carousel.destroy();
			}

			// Create or update the carousel...
			this.CarouselCreateUpdate = function() {

				// Get the curent index so we can start from there...
				options.startPosition = $element.find('.active').index();

				// Let get the curent carousel
				if(carousel) this.CarouselDestroy();

				// Create the carosel.
				$element.owlCarousel(scope.owlOptions);

				// Keep reference of the carousel
				carousel = $element.data('owl.carousel');
			
			}

			// Let lissen for events.
			scope.$on((options.id) ? 'carousel.' + options.id : 'carousel', function(event, action) {
				$element.trigger(action + '.owl.carousel');
			});
		}]
	}

}).directive('owlCarouselItem', function() {
	return {
		restrict: 'EA',
		require:'^owlCarousel',
		link: function(scope, element, attrs, ctrl) { 
			if(scope.$last) ctrl.CarouselCreateUpdate(); 
		}
	};
});

template.html

<div ng-controller="FirstCtr as first">
	<div class="owl-container">
		<div owl-carousel owl-options="first.carouselOptions" class="owl-carousel">
			<div owl-carousel-item ng-repeat="item in first.items">
				{{ item }}
			</div>
		</div>
	</div>
</div>

<div ng-controller="SecondCtr as second">
	<div class="owl-container">
		<div owl-carousel owl-options="second.carouselOptions" class="owl-carousel">
			<div owl-carousel-item ng-repeat="item in second.items">
				{{ item.name }}
			</div>
		</div>
	</div>
	<i ng-click="second.emit('prev')"></i>
	<i ng-click="second.emit('next')"></i>
</div>