If you wish to display images sequentially, transitioning from one to the next, you can achieve this using the following code (assuming that $sce and ngSanitize are accessible).
$scope.imgSrc = '';
$scope.number = 0;
function buildSource() {
if ($scope.number >= 1000) {
return false;
} else {
$scope.number += 10;
$scope.imgSrc = $sce.trustAsResourceUrl('/path/to/' + '$scope.number.toString() + '.png');
}
}
$interval(countNumber, 100);
Then in your view:
<img ng-src="{{imgSrc}}">
The key lies in using $sce to validate the URL as a trusted resource URL. Without it, Angular may not load the source properly.
Adding more details to address the entire question since it was unclear initially.
$scope.number = 0;
function buildSource() {
if ($scope.number >= 1000) {
return false;
} else {
$scope.number += 10;
var images = [];
angular.forEach($scope.number.toString(), function(value) {
this.push($sce.trustAsResourceUrl('/path/to/' + value + '.png');
}, images);
/**
* You will need to figure out the complete
* logic by yourself,
* but Array.prototype.splice will help with that
*/
images.length > 3 ? images.splice(1, 0, $sce.trustAsResourceUrl('/path/to/comma.png')) : null;
$scope.images = images;
}
}
$interval(buildSource, 100);
Then in your view:
<img ng-repeat="image in images" ng-src="{{image}}">