How can I get a 'get' to call automatically?

Question

I can add photos and delete them, however, when I do this, I need to be updated. I would like the area to be updated and this will be done automatically, but after adding the files, the receipt never starts. Should I use .apply for this?

app.js

$scope.submit = function() {
  if ($scope.file) {
    $scope.upload($scope.file);

  }

  if($scope.files){
    $scope.uploadFiles($scope.files);
    console.log('this happens after upload files');
  }
};

 $scope.uploadFiles = function (files) {

  if (files && files.length) {
    for (var i = 0; i < files.length; i++) {
      Upload.upload({
        url: 'api/admin/photos',
        data: {files: files[i]}
      }).then(function(resp){
        $scope.photos.push(resp.data);
        $log.info(resp.data);
        $log.info($scope.photos);
        getPhotos();
      },
      function(resp){
        console.log('Error status: ' + resp.status);
      },
      function(evt){
        //var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
         //console.log('progress: ' + progressPercentage + '% ' + evt.config.data.files.name);
      });
    }
  }

};



   //get all photographs
   $scope.photos = [];
   var getPhotos = function(){

$http.get('api/admin/photos/get')
    .then(function successCallback(response){
        $scope.photos.length = 0;
        for (var i=0; i < response.data.length; ++i){
            $scope.photos.push(response.data[i]);
        }
        $log.warn($scope.photos);
        console.log('this happened automatically');
    },
    function errorCallback(error){
        $log.warn(error);
    });

};

getPhotos();

$scope.deletePics = function(id){

    $http.delete('/api/admin/photos/' + id, {params : {id: id}})
        .then(function successCallback(response){
            //console.log(response);
            $scope.photos = $scope.photos.filter(function(photo){
             return photo.id !== id;
          });
            },
            function errorcallback(error){
                console.log(error);
            });

  };

When I submit for download, in my console.log this is what I get:

[Object, Object]0: Object1: Objectlength: 2__proto__: Array[0]

app.js: 375 this happened automatically

However, when I update the code, images appear.

HTML

<form  ng-controller="adminController" name="form" enctype="multipart/form-data">


Single Image with validations

Choose submit

<span class="progress" ng-show="progress >= 0">
        <div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
    </span>

</form>


<ul >
    <li ng-repeat="photo in photos"><img ng-src="img/{{ photo.url}}" />

    {{ photo }}
    {{photo.name}}

    {{photos}}

     <button class="button btn btn-warning" ng-      click="deletePics(photo._id)">Delete</button>
 </li>

</ul>

Answer 1

just go into the function you call in your then()

$scope.photos = [];
//get all photographs
var getPhotos = function(){
    $http.get('api/admin/photos/get')
        .then(function successCallback(response){
            $scope.photos.length = 0;
            for (var i=0; i < response.data.length; ++i){
                $scope.photos.push(response.data[i]);
            }
        },
        function errorCallback(error){
            $log.warn(error);
        });

};
getPhotos(); // That way it is still called

.

 $scope.uploadFiles = function (files) {

  if (files && files.length) {
    for (var i = 0; i < files.length; i++) {
      Upload.upload({
        url: 'api/admin/photos',
        data: {files: files[i]}
      }).then(function(resp){
        $scope.photos.push(resp.data);
      },
      function(resp){
         console.log('Error status: ' + resp.status);
         getPhotos();              // <==== Here
      },
      function(evt){
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
         console.log('progress: ' + progressPercentage + '% ' + evt.config.data.files.name);
      });
    }
  }

};

Answer 2

     $scope.uploadFiles = function (files) {

      if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          Upload.upload({
            url: 'api/admin/photos',
            data: {files: files[i]}
          }).then(function(resp){
            //$scope.photos.push(resp.data);
     $scope.getPhotos().then(function(response){
            $scope.photos = response.data;
        },
        function errorCallback(error){
            $log.warn(error);
        });
          },
          function(resp){
            console.log('Error status: ' + resp.status);
          },
          function(evt){
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
             console.log('progress: ' + progressPercentage + '% ' + evt.config.data.files.name);
          });
        }
      }

    };



    //get all photographs
    $scope.getPhotos = function(){

      return $http.get('api/admin/photos/get');
    }

    $scope.getPhotos().then(function(response){
            $scope.photos = response.data;
        },
        function errorCallback(error){
            $log.warn(error);
        });

    $scope.deletePics = function(id){

        $http.delete('/api/admin/photos/' + id, {params : {id: id}})
            .then(function successCallback(response){
                },
                function errorcallback(error){
                    console.log(error);
                });

      };