I am currently implementing an angularJs-slick slider in my project to display various packages as a sliding feature.

I have ensured that all the necessary files are included and I am dynamically fetching the packages through the controller.

However, I am facing an issue where the packages are being displayed one after the other instead of within the slider with the slide control buttons. Additionally, the control buttons are not loading into the DOM. Any assistance on this matter would be highly appreciated. Please correct me if I am making any mistakes here. Thank you.

    <div class="row slick-container">
            <slick settings="responsiveConfig">
                {% verbatim %}
                    <div class="col-xs-11 col-xs-offset-0-5 col-sm-11 col-sm-offset-0-5">
                        <div class="row slick-container text-elegant">
                            <slick slides-to-show="4" slides-to-scroll="4">
                                <div class="col-sm-3 space-bottom-none slick-anchor space-top-none" ng-repeat="item in popularpackages">
                                    <div class="panel panel-default panel-elegant">
                                        <div class="panel-header text-center hidden-xs">
                                            <img class="img-responsive inline full-block" ng-src="/images/aa1.{{loop.index+1}}.jpg" />
                                        </div>
                                        <div class="panel-body">
                                            <a ng-click="trackPopularClick('{{item.test_name}}')" title="{{ item.test_name }}">
                                                <div class="text-center">
                                                    <div title="{{ item.test_name }}">
                                                        <h3 class="space-top-none text-heading text-primary text-ellipsis text-center">{{ item.test_name }}</h3>
                                                        <span class="text-sm text-muted">Best Suited Category:</span>
                                                        <img class="img-responsive inline"  style="height:1em;display:inline;border:0;" ng-src="/images/{{ item.item_icon }}.png"> <span class="text-sm text-muted">{{ item.item_name }}</span>
                                                        <div class="text-elegant text-heading text-muted text-center space-top-lg">
                                                            <span class="text-base text-center">{{ item.bundledTestsCount }} parameters</span></br>
                                                            <span>
                                                                INR
                                                                <del class="text-muted">{{ item.price }}</del>
                                                                <span class="text-secondary text-lg">{{ item.displayPrice }}</span>
                                                            </span>
                                                        </div>
                                                        <hr />
                                                        <span ng-repeat="organ in item.organCovered | split:',':0">
                                                            <img title="{{ organ }}" alt="{{ organ }}"
                                                                    class="inline img-responsive" ng-src="/images/organs/{{ organ|trim }}.png"
                                                                    style="height: 15px;">
                                                            <span class="text-primary">{{ organ|trim }}</span>
                                                        </span>
                                                        </br></br>
                                                        <a href="/packages/{{item.slug}}-in-{{locationCity}}">
                                                        <button class="btn-span blueBorderBtn btn-float-left">+ Know more</button>
                                                        </a>
                                                        <button class="btn btn-primary btn-float-right" ng-click="checkout(item.testLabId,locationCityId)">Book Now</button>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </slick>
                            </div>
                        </div>
                    </div>    
                {% endverbatim %}
            </slick>
        </div>;

// javascipts properly structured code begins
angular.module('MT.app', [
    'slickCarousel'
])

.controller('popularTestsController', function(
    $scope,
) {
    $scope.responsiveConfig = {
        enabled: true,
        autoplay: true,
        draggable: false,
        autoplaySpeed: 3000,
        method: {},
        dots: false,
        infinite: false,
        speed: 300,
        slidesToShow: 3,
        slidesToScroll: 3,
        event: {
            beforeChange: function(event, slick, currentSlide, nextSlide) {},
            afterChange: function(event, slick, currentSlide, nextSlide) {}
        },
        responsive: [{
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    };
});