JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<div ng-app="example" ng-controller="ExampleCtrl">
   <!-- directive: flPreloadImages {{imageList}}  -->
   <div id="gallery-frame">
      <img ng-src="{{image()}}" width="500" height="350">
      <p>{{imageNum}} of {{images.length}}</p>
   </div>
   <div id="gallery-controls">
      <p><input type="button" value="Prev" ng-click="prev()"><input type="button" value="Next" ng-click="next()"></p>
   </div>
</div>

JavaScript

/**
    * Example Module
    */
   angular.module('example', [])
   /**
    * Preload Images Directive
    *   
    * Accepts a comma deliminated list of image paths which it loads immediately
    *   
    */
   .directive('flPreloadImages', [ "$interpolate", "$exceptionHandler", function($interpolate, $exceptionHandler){
     return {
       restrict: "M", 
       link: function(scope, elm, attrs) {
         var exp = $interpolate(attrs.flPreloadImages);
         var images = exp(scope).split(","),
             que = 0;

         angular.forEach(images, function(imageSrc){
           var image = new Image();
           que++;
           image.onload = function(){
             que--;
             checkQue();
           }
           image.onerror = function(){
             $excpetionHandler("There was an error preloading an image.")
           }
           image.src = imageSrc;
         });
         checkQue();
         function checkQue () {
           if(que == 0){
             scope.$broadcast("imagesPreloaded");
           }
         }
       }
     }
   }]);



   /**
    * Example Ctrl
    * 
    */
   function ExampleCtrl ($scope) {
      var self = this;
      $scope.images = [
         "http://www.strictlysocial.com/wp-content/uploads/2011/08/scenic.jpg",
         "http://www.visitourchina.com/images/fileUpload/120406153816254.jpg",
         "http://hanoivietnamtravels.com/images/Cozy%20Sapa%20-%20Scenic%20Halong%20Bay.jpg",
         "http://farm4.staticflickr.com/3613/3285466311_ea07ed19e3.jpg",
         "http://www.sangres.com/dimages/south-dakota/scenic-byways/Breezy_Point-winter_2.jpgr"];
      $scope.imageList = $scope.images.join(",");
      $scope.imageNum = 1;
      $scope.image = function(){
         return $scope.images[$scope.imageNum-1];
      }
      $scope.next = function(){
         $scope.imageNum++;
         $scope.imageNum = $scope.imageNum > $scope.images.length ? 1 : $scope.imageNum;
      }
      $scope.prev = function(){
        ...