Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  Hello, {{name}}!<br>
    
    
<div class="frame">
    <div id="CSS3Slideshow">
					<img ng-repeat="(key,url) in images" class="img{{key+1}}" ng-src="{{url}}">
	</div>
</div>
    
    <br><br>
        
  
<div class="frame">
    <div id="CSS3Slideshow">
        
	<img class="img1" src="http://rollingout.com/wp-content/uploads/2013/06/prince.jpg">
        
    <img class="img2" src="http://static.guim.co.uk/sys-images/Music/Pix/pictures/2011/6/3/1307115506503/Prince-performing-on-stag-007.jpg">
                                                					               <img class="img3" src="http://static.gigwise.com/artists/wenn5148053prince.jpg">
                                                                        					<img class="img4" src="http://soniceditions.com/library/prince-2ICP_o_tn.jpg">
	</div>
</div>   

    
</div>

CSS

.frame{
            height: 100vh;
			max-height: 100vh;
			overflow:hidden;
               width:20rem;
			position: relative;
}

@-webkit-keyframes fade {
	0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.0); } 
}

@-webkit-keyframes fade_start_opaque {
	0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.0); } 
}

@-webkit-keyframes fade_start_opaque_alt {
	0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
	3% { opacity:1;  }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.0); } 
}


@-moz-keyframes fade {
	0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -moz-transform:translate(0px,0px) scale(1.0); } 
}

@-moz-keyframes fade_start_opaque {
	0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -moz-transform:translate(0px,0px) scale(1.0); } 
}


#CSS3Slideshow, #CSS3Slideshow img 
{ 
    position:absolute 
}

#CSS3Slideshow 
{ 
	overflow:hidden;
	width:100%; 
	height:100%;

	background-color: $color3;
}


#CSS3Slideshow img 
{ 


	left: -20%;
	top: -20%;

	height: 100vh;
	width: 150vh;

	opacity:0; 

}


/* 20s : 20s; // MUST BE A MULTIPLE OF THE NUMBER OF SLIDES, USUALLY 4 */




#CSS3Slideshow .img1 {
 	opacity: 1;
 	-webkit-animation:fade_start_opaque_alt 20s linear infinite; 
 	-moz-animation:fade_start_opaque 20s linear infinite; 
 		-webkit-animation-delay:0s; -moz-animation-delay:0s;

}

#CSS3Slideshow .img2 {
	-webkit-animation:fade 20s linear infinite; 
	-moz-animation:fade 20s linear infinite; 
	-webkit-animation-delay:5s; -moz-animation-delay:5s;
}

#CSS3Slideshow .img3 {
...

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    
    $scope.images = [];
    $scope.images.push('http://bigphonymusic.com/images/bigphony.jpg');
    
 $scope.images.push('http://static.guim.co.uk/sys-images/Music/Pix/pictures/2011/6/3/1307115506503/Prince-performing-on-stag-007.jpg');
    
     $scope.images.push('http://static.gigwise.com/artists/wenn5148053prince.jpg');
    
     $scope.images.push('http://soniceditions.com/library/prince-2ICP_o_tn.jpg');

console.log($scope.images);
    
}