3D Carousel Directive For Angular

app.js

angular
  .module('myApp')
  .directive( '3dcarousel', ['$timeout', function($timeout) {
    return{
      link: function($scope, element, attrs) {
        $scope.$on('sliderLoaded', function() {
          $timeout(function() {
            var actualWidth = angular.element( window ).width()
            var documentWidth = actualWidth * 0.464 ;
            var documentHeight = documentWidth * 0.7;
            element.carousel({
            		frontWidth: documentWidth,
                frontHeight: documentHeight,
                carouselWidth: actualWidth,
                carouselHeight: documentHeight,
            		directionNav:true,
            		description: true,
            		descriptionContainer: '.description',
            	});
          }, 0, false);
        })
      }
    }
  }]);

carousel-view.html

  <div 3dcarousel class="slider-wrapper">
          <div class="slides"> <!-- BEGIN CAROUSEL -->
            <div class="slideItem"  ng-repeat="slide in slides" ng-class="{'active-slide':$first}"> <!-- SLIDE ITEM -->
                <img ng-src="{{slide.featured_image_thumbnail_url.full}}">
                <div class="description">
                    <ul>
                        <li>
                            <span class="product-name">Net Rod MKii</span>
                            <span class="product-cat">Fibreglass & Cork</span>
                        </li>
                        <li><a href="#" class="btn line light">order this product <i class="icon-arrow"></i> </a></li>
                    </ul>
                </div>
            </div>
          </div>
        </div>

sliderController.js

angular.module('myApp')
  .controller('slideCtrl', function ($scope, $timeout) {
    $scope.slides = ['imagepath-1', 'image-path-2'];
    $scope.setCarouselSlides = function() {
      $scope.$broadcast('sliderLoaded');
    };
    $scope.setCarouselSlides();
  });