Error in Chrome with bootstrap carousel

Greetings I am trying to make a bootstrap carousel with multiple items in angular. The funny thing is that it works in Internet Explorer and Firefox but in Chrome it does not work.

in Firefox and Internet Explorer:

in Chrome:

I do not know what could be failing. What will be the error or maybe some configuration. Thanks for the help

This is the code of the carousel

<h1>ANGULAR:</h1>
   <div ng-app='angularRoutingApp'>
   <div  ng-controller="ruta_hbo_max" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="10000" id="hbo_mas">
      <div class="carousel-inner">
          <div class="item" ng-class="{active:!$index}" ng-repeat="data in datos  track by $index">
                <div class="col-md-3">
                  <p>{{data.ruta}}</p>
                  <a><img ng-src="{{ data.ruta }}"></a>
                </div>
            </div>
        </div>
   </div>
   </div>

and this is the query to show the images

$(document).ready(function() {
        alert("entrando d");
        $('.item').each(function(){
            var next = $(this).next();
            if (!next.length)
                {
              alert();
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));

            for (var i=0;i<2;i++) 
            {
                next=next.next();
            if (!next.length) 
            {
              next = $(this).siblings(':first');
            }

            next.children(':first-child').clone().appendTo($(this));
        }
    });
});