Displaying data after a time interval in AngularJS

Question

Here is the link for jsFiddle: AngularJS: Show data

I have an HTML file as shown below:

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

The controller in the .js file is as follows:

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"
        }, 
    ];
}

My question is:

Currently, the result is in the following format:

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

I want to show Test-1 : Windows Testat the beginning and after 30 seconds Test-2 : Linux Testand after 30 seconds Test-3 : Unix Test, etc. !!

As soon as all data is completed again, Test-1 : Windows Testwill appear again .. !!

How to implement this using AngularJS?

Answer 1

, ( $interval angular.js). , . , , .

, , .

<div ng-app="myApp">
<div ng-controller="myCtrl">
   <p>{{testName}}</p>
</div>
</div>

Javascript

eache 30 ( 30 ), ,

    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 exact 30 seconds     
    }]);

JSFiddle Demo

.