我在单个项目18对象

Question

我通过遵循指令实现了这个（Can we render objects into html (ng-repeat) after certain limit），但我认为这不是一个好方法（我不确定）。有人可以帮我找到最好的解决方案吗？

ManagmentApp.directive('courselSliderForCandidates', function (HostelManagementService,$compile) {
    return{
        restrict:'A',
        template:"<div></div>",
        link:function (scope,ele,attr) {
            HostelManagementService.get().then(function (response) {
                var $response= response.data.CandidateData;
                var CndHtml="";
                var itemHtml="";
                var u=0;
                var j=0;
                var count=0;
                var vrStatus=false;
                for(var i=0;i<Math.ceil($response.length/18);i++){
                    if(u==0){
                        u++;
                        itemHtml+= "<div class='item active' >";
                    }

                    else{
                        itemHtml+= "<div class='item' >";
                    }
                    //j=0;
                    for(;j<$response.length;j++){
                        count++;
                        CndHtml+= "<div class='col-md-2 clsCndPrfImg'>"+
                            " <a href='#/CandidatesProfile' ng-click='show("+$response[j].ID+")'>"+
                            "<img src='http://www.africaolympic.net/wp-content/uploads/2015/06/default-user.jpg' alt='' class='img-circle' />"+
                            " <div class='col-md-12 clsCandidateName'>"+$response[j].Name+"</div>"+
                            " </a>"+
                            " </div>";
                        if(count === 18 && $response[j]){
                            j=j+1;
                            vrStatus=true;

                            ele.append($compile(itemHtml+CndHtml+"</div>")(scope));
                            CndHtml="";
                            itemHtml="";
                            count=0;

                            break;
                        }
                        else{
                            vrStatus=false;
                        }
                    }

                    if(!vrStatus){
                        ele.append($compile(itemHtml+CndHtml+"</div>")(scope));
                    }

                    //CndHtml+="</div>";

                }
                // $compile(ele)(scope);

            },function (err) {

            });
        }
    }
});

Html我写的是这样的：

<div class="carousel slide management-item-carousel" id="hstlCandidateProfiles">
    <div class="carousel-inner" coursel-slider-for-candidates id="cnddateCourselInner">

    </div>
    <a class="left clsCustomWidth carousel-control" id="" data-target="#hstlCandidateProfiles" data-slide="prev">
        <i class="icon-prev"></i>
    </a>
    <a class="right clsCustomWidth carousel-control" data-target="#hstlCandidateProfiles" data-slide="next">
        <i class="icon-next"></i>
    </a>
</div>