Attempting to utilize $interval from Angular to switch the currently visible item in a list using ng-show. Upon inspecting the HTML, it was noticed that Angular alters ng-show between true and false, but does not eliminate the ng-hide class. The HTML structure is quite straightforward:
<h1>Hello Plunker!</h1>
<div ng-controller="MyCtrl">
<div>Iterator: {{i}}</div>
<ul>
<li ng-repeat="d in data" ng-show="{{i == $index}}">{{i}} - {{$index}} - {{d}}</li>
</ul>
</div>
The app.js is also quite simple:
(function(){
var app = angular.module('MyApp', ['my-controller']);
})();
and my module/controller
(function(){
var app = angular.module('my-controller', []);
app.controller('MyCtrl', ['$scope', '$interval', function($scope, $interval){
$scope.data = [111, 222, 333, 444];
$scope.i = 0;
var timeoutId;
timeoutId = $interval(function(){
$scope.i ++;
if ($scope.i >= $scope.data.length)
$scope.i = 0;
},
1000);
}]);
})();