javascript - アクティブなスライドを動的に設定するブートストラップ Angular カルーセル

Question

Bootstrap Angular カルーセルを使用しています。私がやろうとしているのは、ロード時にアクティブなクラスを動的に設定することです。私 mediacontent[slider_url].itemsはバックエンドからロードされています。私は約束された方法を持っていません。

mediacontent[slider_url].items.active=true;

follwing はファクトリです (無限 -scroll の場合) バックエンドから画像配列を取得するために使用しています。

画像データ ファクトリ:

app.factory('ScrollGallery', function($http) {

    var Gallery = function(url) {
        this.items = [];
        this.busy = false;
        this.next = url;
        this.end = false;
        this.extra = {};

    };

    Gallery.prototype.nextPage = function() {
        if (this.busy)
            return;
        this.busy = true;
        if (this.next) {
            var url = this.next;
        } else {
            this.end = true;
            this.busy = false;
            return;
        }
        $http.get(url).success( function(data) {

            var items = data.results;
            var extra = [];
            if ( typeof data.extra != 'undefined') {
                extra = data.extra;
            }

            for (var i = 0; i < items.length; i++) {
                this.items.push(items[i]);
            }
            this.extra = extra;
            this.next = data.next;
            this.busy = false;
            if (!data.next)
                this.end = true;
            this.count = data.count;
        }.bind(this));
    };

    return Gallery;
});

カルーセル HTML :

<carousel id="myCarousel" interval="myInterval"  on-carousel-change="onSlideChanged(nextSlide, direction)">

        <slide ng-repeat="slide in mediacontent[slider_url].items" active="slide.active">
            <div ng-if="slider_url=='image'">
            <img ng-src="{[{slide.file}]}" alt="{[{slide.file}]}" style="margin:auto;width:250px;height:400px" />
            </div>
       </slide>

</carousel>         

動的にアクティブに設定できる方法はありますか、提案してください。

私が試したこのプランカー： http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview