Aplica uma diretiva para executar o Owl Carousel

app.js

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

app.controller("ListagemController", function($scope){
	$scope.itens = [];

	for (var i = 1; i <= 16; i++) {
		$scope.itens.push({text: i});
	};
})

app.directive('owlcarousel',function(){

	var linker = function(scope,element,attr){


		//carrega o carrosel
		var loadCarousel = function(){
			element.owlCarousel({
				items : 10, //10 items above 1000px browser width
				itemsDesktop : [1000,5], //5 items between 1000px and 901px
				itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
				itemsTablet: [600,2], //2 items between 600 and 0;
				itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
			});
		}

		//aplica as ações para o carrosel
		var loadCarouselActions = function(){
			angular.element(".owlcarousel_next").click(function(){
				element.trigger('owl.next');
			})
			angular.element(".owlcarousel_prev").click(function(){
				element.trigger('owl.prev');
			})
			angular.element(".owlcarousel_play").click(function(){
				element.trigger('owl.play',1000);
			})
			angular.element(".owlcarousel_stop").click(function(){
				element.trigger('owl.stop');
			})
		}

		//toda vez que adicionar ou remover um item da lista ele carrega o carrosel novamente
		scope.$watch("itens", function(value) {
			loadCarousel(element);
		})

		//inicia o carrosel
		loadCarouselActions();
	}

	return{
		restrict : "A",
		link: linker
	}

});

carousel.html

<div id="demo" ng-app="app" ng-controller="ListagemController">
  <div class="container">
    <div class="row">
      <div class="span12">

        <div owlcarousel class="owl-carousel">
          
          <div class="item" ng-repeat="item in itens"><h1>{{item.text}}</h1></div>

        </div>
        <div class="customNavigation">
          <a  class="btn owlcarousel_prev">Previous</a>
          <a owlcarouselaction="next" class="btn owlcarousel_next">Next</a>
          <a class="btn owlcarousel_play">Autoplay</a>
          <a class="btn owlcarousel_stop">Stop</a>
        </div>

      </div>
    </div>
  </div>
</div>


<script src="../assets/js/jquery-1.9.1.min.js"></script> 
<script src="../owl-carousel/owl.carousel.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="app.js"></script>

your example does not care about removing carousel events, the .destroy() is made for that purpose. you should add a listener for $destroy in this directive, and then call the destroy() function on the carousel element.