Carousel 我无法在angularjs中设置引导转盘间隔

我的脑袋绕不开Angularjs版本的旋转木马。我只是简单地使用引导版本。我尝试的时间间隔是1秒或10秒，但似乎没有改变。它总是在5s？左右改变画面？。我的html代码如下所示：

<!-- Carousel================================================== -->
            <div id="myCarousel_whatdowedo" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel_whatdowedo" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel_whatdowedo" data-slide-to="1"></li>
                    <!-- <li data-target="#myCarousel_whatdowedo" data-slide-to="2"></li> -->
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img class="first-slide " ng-src="{{c.image1}}" alt="First slide">
                    </div>
                    <div class="item">
                        <img class="second-slide" ng-src="{{c.image2}}" alt="Second slide">
                    </div>
                    <!-- <div class="item">
          <img class="second-slide" ng-src="{{data.whyus_page1.image3}}" alt="Second slide">
        </div> -->

                </div>
                <!-- here change bootstrap a link to spans to avoid angularjs router interuption -->
                <span class="left carousel-control" href="#myCarousel_whatdowedo" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </span>
                <span class="right carousel-control" href="#myCarousel_whatdowedo" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </span>
            </div>
            <!-- /.carousel -->

下面是完整的控制器

.controller('WhatdowedoBodyController', ['$scope', '$http', '$location', '$anchorScroll','UserService',
    function($scope, $http,  $location, $anchorScroll, UserService) {
        $http.get('json/whatdowedo.json').success(function(data) {
            $scope.data = data;
        });  

        $('.carousel').carousel({
          interval: 1000
        });

    }


])

有人能帮我吗？

我不应该在我的项目中使用$（'.carousel'）不应该使用jquery代码有没有其他替代方法，比如angular.element（'.carousel'））

.controller('WhatdowedoBodyController', ['$scope', '$http', '$location', '$anchorScroll','UserService',
    function($scope, $http,  $location, $anchorScroll, UserService) {
        $http.get('json/whatdowedo.json').success(function(data) {
            $scope.data = data;
        });  

        $('.carousel').carousel({
          interval: 1000
        });

    }


])