Карусель с ограничением ng-repeat до 3 в одной карусели

Я пытаюсь использовать ng-repeat с каруселью. Но, 3 элемента массива должны отображаться в одной карусели. Если длина больше трех, эти элементы будут показаны в следующей карусели.

Небольшой фрагмент ниже,

    $scope.addCampus = newCampus;   
    $scope.model = {};
    $scope.model.campuses = [];

    function init(){
        console.info("Initing");
        $log.log("loading");
        newCampus();
    }


    function newCampus() {
        $log.log("Adding a new campus");
        for(i=1;i<=3;i++){
        $scope.model.campuses.push({});
        }
    }

    init();
});

HTML:

<button ng-if = "model.campuses.length < 9" ng-click = "newCampus()">Add</button>
<div uib-carousel active = "activetTestimonial" interval = "myInterval" no-wrap = "noWrapSlides">
    <div ul-slide  ng-repeat = "quickbite in model.campuses track by $index" index = "$index" class = "widget-slide">
        <button ng-click = "showDeleteDialog($index, true)">delete {{$index}}</button>

        <form name = "formTestimonial[$index]" role = "form" novalidate show-validation>
            <div class = "editor-div-flex editor-url">
                <div class = "login-lable label-editor label-editor-logo editor-div-flex">
                    Name:
                </div>
                <div>
                    <input class = "editor-input widget-input" type = "text" ng-model = "quickbite.title" name = "title" required>
                </div>
            </div>

            <div class = "editor-div-flex editor-url">
                <div class = "login-lable label-editor label-editor-logo text-left">
                    <div>Description:</div>
                    <div class = "editor-limits">
                        ( 300 char )
                    </div>
                </div>
                <div>
                    <textarea class = "editor-textarea widget-input" ng-model = "quickbite.description" maxlength = "300" name = "description" required></textarea>
                </div>
            </div>
        </form>

    </div>
</div>
<div ng-if = "model.campuses.length > 3">
    <div class = "carousel-arrow widget-carousel-arrow-left">
        <button class = "demo-nav testimonial-arrow" ng-click = "prevQuickbiteSlide()">
            <img src = "/content/images/editor/left.png">
        </button>
    </div>
    <div class = "carousel-arrow  widget-carousel-arrow-right">
        <button class = "demo-nav testimonial-arrow" ng-click = "nextQuiclbiteSlide()">
            <img src = "/content/images/editor/right.png">
        </button>
    </div>
</div>

Итак, мне нужно показать 3 элемента в одной карусели. Если элементов массива больше 3, он должен отображаться в следующей карусели.

В конечном итоге первая карусель будет иметь массив [0], массив [1] и массив [2]. Вторая карусель будет иметь массив [3], массив [4] и массив [5].