Angular1.x directive for owl carousel.

app.js

angular.module('demo')
.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'index.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      )}
      .otherwise({
        redirectTo: '/'
      });
})
.controller( 'MainCtrl', function($scope, $stateParams, Projects) {
  $scope.slides = [
    {
      title: "Welcome to the Docs!",
      description: "The <b>Ionic Component Documentation</b> showcases a number of useful components that are included out of the box with Ionic.",
      image: "image.jpg",
    },
    {
      title: "What is Ionic?",
      description: "<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.",
      image: "image1.jpg",
    },
    {
      title: "What is Ionic Cloud?",
      description: "The <b>Ionic Cloud</b> is a cloud platform for managing and scaling Ionic apps with integrated services like push notifications, native builds, user auth, and live updating.",
      image: "image2.jpg",
    }
  ];
})
.directive('owlCarousel', [ '$timeout', function($timeout) {
  return {
    restrict: 'E',
    transclude: false,
    link: function (scope, element) {
      var defaultOptions = {
      };
      scope.initCarousel = function(element) {
        // provide any default options you want

        var customOptions = scope.$eval(jQuery(element).attr('data-options'));
        // combine the two options objects
        for(var key in customOptions) {
          defaultOptions[key] = customOptions[key];
        }
        // init carousel
        // jQuery(element).owlCarousel(defaultOptions);
      };
      // scope.$on('owlCarouselLoaded', function() {
        $timeout(function(){
          jQuery(element).owlCarousel(defaultOptions)
          scope.initCarousel();
        }, 0, false);
      // });
    }
  };
}])
.directive('owlCarouselItem', [function() {
  return {
    restrict: 'A',
    transclude: false,
    link: function(scope, element) {
      // wait for the last item in the ng-repeat then call init
      if(scope.$last) {
        scope.initCarousel(element.parent());
      }
    }
  };
}])

index.html

<data-owl-carousel class="slides owl-carousel"
    data-options=" {
      loop: true,
      items: 3,
      nav: true,
      dots: true
    }
    ">
      <div class="item" owl-carousel-item="" ng-repeat="slide in slides">
          <div class="project-thumbs">
            <img ng-src="{{slide.image}}" />
          </div>
          <div class="project-name">
            <a ng-href="" ng-bind-html="slide.title"></a>
          </div>
      </div>
</data-owl-carousel>