Javascript AngularJS Slick即使按照正确的顺序包含了所有必要的脚本，也无法工作

我正在为我的项目使用angularJs slick滑块，将一些包显示为滑动功能

我已经包含了所有必要的文件，并通过控制器动态地获取包

在这里，软件包一个接一个地显示，而不是在带有滑动控制器按钮的滑块中显示。并且控制按钮不会加载到DOM中。谢谢你的帮助。如果我做错了什么，请纠正我。多谢各位

    <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>

verbatims are used because I am using twig 
```JAVASCRIPTS: this is in the proper structure 
    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
                }
            }]
        };

    })

javascript is properly included in the js file, from module declaration to controller usage.
below css and JS cdn are included in the same order as I have mentioned below:
```CSS CDN 
    <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>

```JS CDN 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-slick-carousel/3.1.7/angular-slick.js"></script>

{%verbatim%}
现在预订
{%endverbatim%}
使用逐字记录是因为我使用的是细枝
```JAVASCRIPTS：这是正确的结构
角度模块（“MT.app”[
“旋转木马”
])
.controller（'popularTestsController'，函数(
$scope，
) {
$scope.responsiveConfig={
启用：对，
自动播放：对，
可拖动：错误，
自动播放速度：3000，
方法：{}，
点：错，
无限：错，
速度:300,，
幻灯片放映：3，
幻灯片滚动：3，
活动：{
变更前：功能（事件、滑动、当前滑动、下一次滑动）{
},
变更后：功能（事件、滑动、当前滑动、下一次滑动）{
}
},
响应：[{
断点：1024，
设置：{
幻灯片放映：3，
幻灯片滚动：3，
无限：是的，
圆点：对
}
},
{
断点：600，
设置：{
幻灯片放映：2，
幻灯片滚动：2
}
},
{
断点：480，
设置：{
幻灯片放映：1，
幻灯片滚动：1
}
}]
};
})
javascript正确地包含在js文件中，从模块声明到控制器使用。
以下css和JS cdn的包含顺序与我在下面提到的顺序相同：
```CSS CDN
```JS CDN

如果要装载油垢，请使用ng

<slick setting="responsiveConfig" arrows="true" ng-if="popularpackages.length > 0">

console中有错误吗？无错误：-（@MasterPoTry在添加body标记后添加slick library脚本标记，但没有任何错误@AkberIqbalAngular slick可以使用硬编码，但当我们包含ng中继器时，它不会。如果您正在制作模型，请检查。