Javascript 以AngularJS显示时间间隔后的数据

以下是JSFIDLE的链接：

我的HTML文件如下所示：

<div ng-controller="myCtrl">         
    <div ng-repeat="test in tests">
           <p>{{test.testName}}</p>
    </div>
</div>

var app = angular.module('myApp', []);

function myCtrl($scope) {
    $scope.tests = [{
        "testName" : "Test-1 : Windows Test"
        }, 
        {
        "testName" : "Test-2 : Linux Test"
        },          
        {
        "testName" : "Test-3 : Unix Test"
        }, 
    ];
}

我的问题是：

目前，结果的格式如下：

Test-1 : Windows Test
Test-2 : Linux Test
Test-3 : Unix Test

我想在开始和30秒后显示

Test-1:Windows测试
，
Test-2:Linux测试
和30秒后显示
Test-3:Unix测试
等等

一旦所有数据再次完成，
Test-1:Windows测试将再次出现

如何使用AngularJS实现这一点？
您可以使用设置的时间间隔（$interval在angular.js中）。我不知道该怎么向你解释。但是我会把我的代码交给fiddler，你可以看到我做了什么

因此，请尝试下面的方法，而不是您的代码

样品

我已经为你更新了正确的代码
 您可能需要将
ngAnimate
与
$interval
@pankajparkar一起使用，您是正确的。请看我的答案。我希望我的回答能解决你的问题；）请更新您的代码以使用
app.controller
，这将是执行代码的更正确方法好的，请稍候seconds@pankajparkar. 是的，我已经更新了我的代码。谢谢你的帮助comment@RameshRajendran：谢谢！这解决了我的问题：）
<div ng-app="myApp">
<div ng-controller="myCtrl">
   <p>{{testName}}</p>
</div>
</div>

    angular.module('myApp',[])
   .controller("myCtrl",["$scope","$interval",function($scope, $interval){
        $scope.tests = [{
            "testName" : "Test-1 : Windows Test"
            }, 
            {
            "testName" : "Test-2 : Linux Test"
            },          
            {
            "testName" : "Test-3 : Unix Test"
            } 
        ];
         var count=0;                    
         $interval(function(){                         
                $scope.testName=$scope.tests[count].testName;
                 count=count+1;
                if($scope.tests.length==count){
                  count=0;
                }                               
         },30000);   // I don't know it's exact 30 seconds     
    }]);