Retrieving data with REST API using AngularJS disables Owl Carousel JavaScript Plugin

Question

I just finished building a REST API with FosRestBundle (Symfony3). Now I want to retrieve some datas with AngularJS from that API.

I firstly workedwith mock data. In fact, I retrieved data from my API using Postman by copying and pasting data to a variable in an AngularJS Service within my project. So the mock service looks like this:

angular.module("MyServiceMock", ['angular.filter'])
    .factory("myService", ['$rootScope', '$filter', function ($rootScope, $filter) {

       var results=         {
           "FAVORITES": [
               {
                   "id": 1,
                   "title": "An Update on The Periscope VIP Program8.",
               },
               {
                   "id": 2,
                   "title": "Storyteller Sit-downs: Sasu Siegelbaum9.",
               },
               ...
        ]
        };

        return {
            getFavorites: function () {
                return results;
            }
             ...
        }
    }])

Now I finished, all the tests I wanted, and decided to work directly with the API and not with a mock anymore.

I've done it pretty easily, by just replacing the mock service with an $http service, and it worked super nicely.

But the problem is that, a jQuery plugin that I used is not working anymore, I don't know why !

I changed many times the order of my includes, but the issues remains. The order of my includes files look like this :

        <script type="text/javascript" src="library/jquery/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>


     <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
            <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script>
            $(document).ready(function() {

                var owlFavoris = $("#owl-favoris");
                var owlRecents = $("#owl-recents");
                var owlAussiConsultes= $("#owl-aussiConsultes");

                myOwlCarousel(owlFavoris);
                myOwlCarousel(owlRecents);
                myOwlCarousel(owlAussiConsultes);

                function myOwlCarousel(owl) {

                    owl.owlCarousel({

                        items: 5,
                        itemsCustom: false,
                        itemsDesktop: [1399, 4],
                        itemsDesktopSmall: [1100, 3],
                        itemsTablet: [930, 2],
                        itemsTabletSmall: false,
                        itemsMobile: [479, 1],
                        singleItem: false,
                        itemsScaleUp: false,
                        slideSpeed: 200,
                        paginationSpeed: 800,
                        rewindSpeed: 1000,
                        autoPlay: true,
                        autoWeight: false,
                        autoHeight: false
                    })
                }


            });
        </script>
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.1/angular-sanitize.min.js"></script>
        <script src="https://code.angularjs.org/1.5.8/i18n/angular-locale_fr-fr.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.14/angular-filter.js" ></script>
        <script type="text/javascript" src="bower/angular-ui-tinymce/src/tinymce.js"></script>

        <script type="text/javascript" src="js/angular-app/app.js" ></script>
        <script type="text/javascript" src="js/angular-app/MesDirectives.js" ></script>
        <script type="text/javascript" src="js/angular-app/MyServiceHttp.js" ></script>
        <script type="text/javascript" src="js/angular-app/MyServiceMock.js" ></script>

The owl.carousel plugin doesn't work anymore since I made a connection to the rest api. I use it in many places of my code. For exemple, use it here :

<div id="owl-favoris" class="owl-carousel owl-theme">

   <div  ng-repeat="favorite in data.FAVORITES  | orderBy:'-comment[1].nbreVue' track by $index " class="item">
                     ...
    </div>
 </div>

What is the problem ? Please help !

Answer 1

try to make a directive and call there Jquery maybe also after a little timeout ... something like:

app.directive('carousel', function ($timeout) {
    return {
        restrict: 'AE',

        link: function (scope, element, attrs) {

            $timeout(function () {


                $('#owl-favoris').carousel();


            });
        }

    };
});