title: Load directory of images in AngularJS
body: <p>I´m trying to implement an image gallery in my Angular app. I´ve managed the upload of pictures in this post: <a href="https://stackoverflow.com/questions/30150646/file-upload-create-directory-if-it-doesnt-exist">File upload: create directory if it doesnt exist</a>.<br>
  So files are put in a subdirectory on the basis of its <code>project_id</code>. This works fine.<br>
  So now I´d like to display the whole set of images of a project. How am I accessing the subdirectory basing on the <code>project_id</code>and how do I display a set of images in a convenient way? Any ideas are appreciated.</p>
  
  <p>My try to route to the subdirectory. The GET request looks ok, the project_id is sent to the route. I can access the directory with a HTTP 200 code, but displaying the images wont work, getting a 404.</p>
  
  <pre><code>app.get('/uploads/:id', function (req, res, next){
      fs.readdir('uploads/'+req.params.id+'/', function (err, files){
          if (err) return next (err);
          res.send(files);
      });
  });
  </code></pre>
  
  <p><strong>Angular Controller</strong></p>
  
  <pre><code>$http.get('/profile/project/').then(function (res){
      $scope.projects = res.data;
      $rootScope.projectId = $scope.projects._id;
      console.log($scope.projectId);
      var id = $rootScope.projectId;
      console.log("Rausgezogene ID: " + id);
      $http.get('/uploads/'+id).success(function (files){
          $scope.img = files;
      });
  });
  </code></pre>
  
  <p><strong>Displaying</strong></p>
  
  <pre><code>&lt;li ng-repeat="x in img"&gt;
      &lt;img ng-src="uploads/{{projects._id}}/{{x}}" width="150" height="100"/&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>Console log</strong></p>
  
  <p><img src="https://i.stack.imgur.com/CnPap.png" alt="Console Log"></p>
  
  <p>Cheers, Wandkleister.</p>