In AngularJs I Am Trying To Access All Images From API Using AWS S3 Secret Key And Access Key As The Bucket Is In Private

I am trying to access images from the backend API. The images are in AWS s3 which are in private. So I am trying to access the images and display in the front end (AngularJS). But there are lot of errors coming. I ma tring to inject the src value with method. I wrote a factory service for s3 config. Code Is In The Fiddel (You Can Edit) This is the API (GET) : https://alsback.immersionslabs.com/alscourses/getallcourses

var app = angular.module("app", ["ui.router"]);
app.factory("photo", function() {
  var photosFactory = {};
  photosFactory.getimages = function(val) {
    console.log("Getimage Service Invoked");
    var albumBucketName = "alsresources";
    AWS.config.update({
      accessKeyId: "<ACCESS KEY>",
      secretAccessKey: "<SECRET KEY>",
      region: "ap-south-1",
    });
    var s3 = new AWS.S3({
      apiVersion: "2006-03-01",
      params: {
        Bucket: albumBucketName
      },
    });
    var pathname = new URL(val).pathname;
    var path = pathname.substring(1);
    var als;
    return new Promise((resolve, reject) => {
      s3.getObject({
        Key: path
      }, function(err, file) {
        if (err) {
          reject("Some Error With S3" + err);
        } else {
          console.log(file.Body);
          als = "data:image/jpeg;base64," + encode(file.Body);
          resolve(als);
        }
      });
    });

    function encode(data) {
      var str = data.reduce(function(a, b) {
        return a + String.fromCharCode(b);
      }, "");
      return btoa(str).replace(/.{76}(?=.)/g, "$&\n");
    }
  };
  return photosFactory;
});
app.controller("mainController", function($scope, $http, photo) {
  console.log("Image Controller");

  $scope.getAllCourse = function() {
    $http.get("https://alsback.immersionslabs.com" + "/alscourses/getallcourses", {
        transformRequest: angular.identity,
        headers: {
          "Content-Type": undefined
        }
      })
      .then(function(data) {
        $scope.courseDetails = data.data.Data
        console.log($scope.courseDetails)
      })
      .catch(function(data) {
        {
          console.log(data)
        }
      })
  }
  $scope.getAllCourse();

  $scope.image = (val) => {
    return photo.getimages(val)
  }

});

 <div ng-app="app" ng-controller="mainController">
  Load Multiple Images From S3 From API using Keys
  <hr>
  <div ng-repeat="x in courseDetails">
    
    <p>
      
    </p>
    <image src="image()"></image>
    <hr>
  </div>
</div>