AngularJS ng-repeat with OwlCarousel

Question

What I'm trying to do is have angular build up the structure of my carousel using the ng-repeat directive, and then feed that to the owl carousel jquery plugin. Part of the trick is that this carousel is coming in with a view (ngView).

This, sadly, does not seem to be that simple.

The options I have explored so far are:

1. $viewContentLoaded event. This does not work, and is apparently frowned upon (since it amounts to DOM manipulation from the controller)
2. Simply including some script at the bottom of the view page to initialize the carousel plugin. This works for static content, but not for content added via ng-repeat
3. Adding a custom directive. Ok, this works, but it seems to mean that I then have to build up the flippen entire carousel myself. Nice use of jQuery.append() etc. Code for this follows beneath.

Basically my question is this: is there some other/better way to do this (as opposed to endless looping and HTML string concatenations)?

Please note that the real carousel items I need to build up is a LOT more complicated that the sample below.

Ok, now some code:

First, HTML snippet from the relevant view:

<div class="owl-carousel owl-theme daCarousel" da-carousel="">
</div>

Next, the directive config:

app.directive('daCarousel',function () {
    var makeItLive = function (scope, element, attrs)
    {
        //TODO feed in real data here
        for (var i = 0; i < 10; i++) {                  
            $(element).append ('<div class="item">Item ' + i + '</div>');
        }

        $(element).owlCarousel({
            navigation : true, // Show next and prev buttons
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true                     

        });
};

EDIT

Ok, in the meanwhile I have discovered the $templateCache service.

In essence define a template in a script tag (mine is actually in the relevant view):

<script type="text/ng-template" id="specialsTemplate.html">
//HTML with AngularJS bindings etc here
</script>

This you can then get at in your directive like so:

var tpl = $templateCache.get('specialsTemplate.html')   ;   
var compiled = $compile(tpl)(scope);
element.html (compiled);

For the last bit of magic, using oakfish's suggestion of $timeout :

$timeout (
            function () {
                $('#correctIdForYourCarouselElement').owlCarousel({

                    navigation : false, // Show next and prev buttons
                    slideSpeed : 300,
                    paginationSpeed : 400,
                    singleItem:true

                    // "singleItem:true" is a shortcut for:
                    // items : 1, 
                    // itemsDesktop : false,
                    // itemsDesktopSmall : false,
                    // itemsTablet: false,
                    // itemsMobile : false

                });
            },
            50
        );

Answer 1

Ok, to elaborate on my EDIT above, lets just give more rounded answer.

First, you need a controller to inject data into the scope of the directive (note that I'm NOT using an isolate scope thing here):

angular.module('ngApp')
.controller('MyCtrl', function ($scope) {
$scope.content = getDataSomeHow();
});

Next, define your template. I found the relevant view was a good place in my case. Note, again, you might want to read up about isolate scopes.

<script type="text/ng-template" id="specialsTemplate.html">
                    <div class="item" ng-repeat="group in content" >
                        <div class="container">
                            <div class="row" ng-repeat="itemRow in group">                              
                                <div class="col-lg-2 outerItemContainer" ng-repeat="item in itemRow">
                                    <div class="itemContainer">

                                        <div class="someClasss">
                                            {{item.description}} 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </script>

Ok, next up, the actual directive. Note that the use of the pre and post did not help at all, I STILL had to use the $timeout service to get the carousel working.

angular.module('ngApp')
  .directive('specialsDirective', function ($compile,$templateCache,$timeout) {

    var buildIt = function (scope, element, attrs) {        

        var tpl = $templateCache.get('specialsTemplate.html')   ;   
        var compiled = $compile(tpl)(scope);
        element.html (compiled);
    };  

    var makeItScroll = function (scope, element,attrs) {    
            /* In THEORY, at this point it should be safe and fine
            * to call this jQM plugin. But it is not - does NOT work. Hence
            * the kludgy timeout crap here.
            */
            $timeout (
                function () {
                    $('#myCarousel').owlCarousel({

                        navigation : false, // Show next and prev buttons
                        slideSpeed : 300,
                        paginationSpeed : 400,
                        singleItem:true

                    });
                },
                50
            );

    };


    return {
      restrict: 'EA',
      replace:true,
      compile: function compile (tElement, tAttrs, transclude){
        return {
            pre: buildIt,
            post: makeItScroll
        }       
      }      
    };
  });

Ok, then the final bit, the actual directive use:

<div ng-controller="MyCtrl"  >
                    <div specials-directive="" id="myCarousel" class="owl-carousel owl-theme">                                      
                    </div>
                </div>