zenithtekla/app.js

## app.js
var app = angular.module('app', []);

app.controller('MainCtrl', function ($scope) {
    // $scope.images = images;
    $scope.images = JSON.parse(images_str);
    // $scope.images = images;
});

## bug_attachments_display.html
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="client/img_script/php_to_js_array.php"></script>
<script src="javascript/angular.js"></script>
<script src="javascript/angular-animate.js"></script>
<script src="javascript/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="javascript/bug_view_attachments.js"></script>
<script src="client/img_script/app.js"></script>
</head>
<body>
Display all image files from a directory
<div ng-app="app">
  <div ng-controller="MainCtrl">
    <input ng-model="query" type="text"
       placeholder="Filter by" autofocus>
      <ul>
          <li ng-repeat="image in images | filter:query | orderBy: 'modified'">
              <img ng-src="client/img_script/{{image.src}}" title="client/img_script/{{image.name}}"/>
          </li>
      </ul>
  </div>
</div>

<!-- CAROUSEL -->
  <div ng-app="myApp" class="col-md-4 show-grid">
    <div ng-controller="CarouselCtrl" >
      <div>
        <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
          <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
              <h4>Slide {{slide.id}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </uib-slide>
        </uib-carousel>
      </div>
      <div class="row">
        <div class="col-md-2">
          <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
          <button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="noWrapSlides">
              Disable Slide Looping
            </label>
          </div>
        </div>
        <div class="col-md-2">
          Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval"> See bug_attachment_display.php for fullview
        </div>
      </div>
    </div>
  </div>
</body>


## php_to_js_array.php

<?php
// source: https://github.com/lthr/php-angularjs-show-all-images-in-a-folder
    header('Content-Type: text/javascript; charset=UTF-8');
    echo "var images = [];\n";
    $folder = 'test_images/';
    $all_images = glob($folder."{*.jpg, *.JPG, *.JPEG, *.png, *.PNG}", GLOB_BRACE);
    $count = count($all_images);
    for ($i = 0; $i < $count; $i++) {
        echo "images[".$i."] = {};\n";
        echo "images[".$i."].src = '".$all_images[$i]."';\n";
        echo "images[".$i."].name = '".substr($all_images[$i],strlen($folder),strpos($all_images[$i], '.')-strlen($folder))."';\n";
        echo "images[".$i."].modified = '".date('YmdHis', filemtime($all_images[$i])).$i."';\n";
    }
?>

<?php
// rewritten to separate JS and PHP code.
	header('Content-Type: text/javascript; charset=UTF-8');
	function get_all_images_from_a_directory($folder='test_images/', $type='{*.jpg, *.JPG, *.JPEG, *.png, *.PNG}'){
	    $images = [];
	    $all_images = glob($folder.$type, GLOB_BRACE);
	    $count = count($all_images);
	    for ($i = 0; $i < $count; $i++) {
	        $images[$i] = new stdClass();
	        $images[$i]->src = $all_images[$i];
	        $images[$i]->name = substr($all_images[$i],strlen($folder),strpos($all_images[$i], '.')-strlen($folder));
	        $images[$i]->modified = date('YmdHis', filemtime($all_images[$i])).$i;
	    }
	    return $images;
    }
    $t_images = get_all_images_from_a_directory();
    /*echo '<pre>';
    	print_r($images);
    	// alternatively; no header!!
    	<script type="text/javascript">
			var ar = <?php echo json_encode($t_images) ?>;
		</script>
    echo '</pre>';*/
    echo "var images_str = '". json_encode($t_images). "';\n";
?>
	var app = angular.module('app', []);

	app.controller('MainCtrl', function ($scope) {
	// $scope.images = images;
	$scope.images = JSON.parse(images_str);
	// $scope.images = images;
	});
	<head>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="client/img_script/php_to_js_array.php"></script>
	<script src="javascript/angular.js"></script>
	<script src="javascript/angular-animate.js"></script>
	<script src="javascript/ui-bootstrap-tpls-1.3.3.js"></script>
	<script src="javascript/bug_view_attachments.js"></script>
	<script src="client/img_script/app.js"></script>
	</head>
	<body>
	Display all image files from a directory
	<div ng-app="app">
	<div ng-controller="MainCtrl">
	<input ng-model="query" type="text"
	placeholder="Filter by" autofocus>
	<ul>
	<li ng-repeat="image in images \| filter:query \| orderBy: 'modified'">
	<img ng-src="client/img_script/{{image.src}}" title="client/img_script/{{image.name}}"/>
	</li>
	</ul>
	</div>
	</div>

	<!-- CAROUSEL -->
	<div ng-app="myApp" class="col-md-4 show-grid">
	<div ng-controller="CarouselCtrl" >
	<div>
	<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
	<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
	<img ng-src="{{slide.image}}" style="margin:auto;">
	<div class="carousel-caption">
	<h4>Slide {{slide.id}}</h4>
	<p>{{slide.text}}</p>
	</div>
	</uib-slide>
	</uib-carousel>
	</div>
	<div class="row">
	<div class="col-md-2">
	<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
	<button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
	<div class="checkbox">
	<label>
	<input type="checkbox" ng-model="noWrapSlides">
	Disable Slide Looping
	</label>
	</div>
	</div>
	<div class="col-md-2">
	Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval"> See bug_attachment_display.php for fullview
	</div>
	</div>
	</div>
	</div>
	</body>

	<?php
	// source: https://github.com/lthr/php-angularjs-show-all-images-in-a-folder
	header('Content-Type: text/javascript; charset=UTF-8');
	echo "var images = [];\n";
	$folder = 'test_images/';
	$all_images = glob($folder."{.jpg, .JPG, .JPEG, .png, *.PNG}", GLOB_BRACE);
	$count = count($all_images);
	for ($i = 0; $i < $count; $i++) {
	echo "images[".$i."] = {};\n";
	echo "images[".$i."].src = '".$all_images[$i]."';\n";
	echo "images[".$i."].name = '".substr($all_images[$i],strlen($folder),strpos($all_images[$i], '.')-strlen($folder))."';\n";
	echo "images[".$i."].modified = '".date('YmdHis', filemtime($all_images[$i])).$i."';\n";
	}
	?>

	<?php
	// rewritten to separate JS and PHP code.
	header('Content-Type: text/javascript; charset=UTF-8');
	function get_all_images_from_a_directory($folder='test_images/', $type='{.jpg, .JPG, .JPEG, .png, *.PNG}'){
	$images = [];
	$all_images = glob($folder.$type, GLOB_BRACE);
	$count = count($all_images);
	for ($i = 0; $i < $count; $i++) {
	$images[$i] = new stdClass();
	$images[$i]->src = $all_images[$i];
	$images[$i]->name = substr($all_images[$i],strlen($folder),strpos($all_images[$i], '.')-strlen($folder));
	$images[$i]->modified = date('YmdHis', filemtime($all_images[$i])).$i;
	}
	return $images;
	}
	$t_images = get_all_images_from_a_directory();
	/*echo '<pre>';
	print_r($images);
	// alternatively; no header!!
	<script type="text/javascript">
	var ar = <?php echo json_encode($t_images) ?>;
	</script>
	echo '</pre>';*/
	echo "var images_str = '". json_encode($t_images). "';\n";
	?>