Angularjs观看元素切换帧的变化

我有一个使用div的旋转木马。我想看看它是哪个div，并相应地切换页面的其余部分。。。

这是我尝试rootscope的控制器中的一些代码。candidateview是一个ng show，如果它是第一个div.，我希望它是真的

self.changedWatcher = function(){
            var items = angular.element(document.querySelectorAll(".item"));
            $scope.$watch(items, function() {
                for (var i = 0; i < items.length; i++) {
                    var wrappedItem = items[i];
                    if (wrappedItem.hasClass('active')) {
                        if (i == 0) {
                            alert("hi");
                            $rootScope.candidateView = true;
                        } else if (i == 1) {
                            $rootScope.candidateView = false;
                            alert("hi2");
                        } else {
                            $rootScope.candidateView = false;
                            alert("hi3");
                        }
                    }
                }
            });
        }
        self.changedWatcher();

以上这些都不起作用——似乎只起了几秒钟的作用，再也不会着火了。

这是HTML:

    <div id="myCarousel" class="carousel slide" data-ride="carousel"
    data-interval="false" ng-controller='MainController as ctrl'>
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            first item...
        </div>
        <div class="item">
            another item...
        </div>
        <div class="item">
        ... an item
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button"
        data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"
        aria-hidden="true"></span> <span class="sr-only">Previous</span>
    </a> <a class="right carousel-control" href="#myCarousel" role="button"
        data-slide="next"> <span
        class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!-- /.carousel -->

<!--below is div to show -->
<div class="container viewpoint" ng-show='candidateView'></div>

我还试图将ng-click链接到一些javascript，但失败了，因为当你点击时，它不会足够快地更改carousel中的活动div，而且总是被延迟。

编辑------------------------------

我添加了一些加法和减法函数来跟踪转盘的currentFrame。。。但不幸的是，如果你双击它会打乱计数，因为帧需要转换时间。。。我试着用超时禁用按钮，但这冻结了一切。。。

$rootScope.currentFrame = 0;
        self.changeFrame = function(value) {
            $rootScope.currentFrame = value;
        }
        self.addFrame = function(value) {
            $rootScope.currentFrame += value;
            if ($rootScope.currentFrame > 2)
                $rootScope.currentFrame = 0;
            if ($rootScope.currentFrame < 0)
                $rootScope.currentFrame = 2;
        }

编辑方法的问题：双击会打乱计数。。。ng禁用超时也会导致转盘等待。

$rootScope.currentFrame = 0;
        self.changeFrame = function(value) {
            $rootScope.currentFrame = value;
        }
        self.addFrame = function(value) {
            $rootScope.disable = true;
    $timeout(function() {
            $rootScope.currentFrame += value;
            if ($rootScope.currentFrame > 2)
                $rootScope.currentFrame = 0;
            if ($rootScope.currentFrame < 0)
                $rootScope.currentFrame = 2;
          }, 500);
           $rootScope.disable = false;
        }