ng-repeats mutliple times when i call try call this

Question

I am calling ng-repeat on my laravel view ng-repeat call a function from controller that gets the data from database and do some calculations and then reuturing the array but it keeps on returning the data i don't know why can anyone can help me on this why http requests execute multiple times?

Here is the code Laravel View

<div ng-controller="HotelsListController as hotelLstCntrl">
    <section class="section section-sec top-hotels hotels-sec">
        <div class="container">
            <div class="section-title">
                   <h2>Hotels</h2>
           </div>
           <div class="section-body">
             <div class="owl-carousel owl-theme owl-custom-arrow" id="top-hotels">
                 <div class="item" ng-repeat="hotel_item in hotelLstCntrl.getTopHotels() ">
                     **This exuecute multiple times**
                 </div>
             </div>
          </div>             
        </div>
    </section>
</div> 

angular js controller

(function(){
  angular
      .module('app')
      .controller('HotelsListController',hotelsListController);

      hotelsListController.$inject = ['$http','dataService','commonMethods'];

      function hotelsListController($http,dataService,commonMethods){

         var vm =  this;
         vm.getHotelsRequests = getHotelData;
         vm.getTopHotels = getTopHotels;

         function getTopHotels(){
             var hotelsLimit =  10;
             var top_hotels = [];    
             //calling the dataService method to get the hotels 
             dataService.getHotels().then((response)=>{
                 top_hotels = response.data.data;
             });
             console.log(top_hotels);
             return top_hotels;              
         }
     }
})();

Data service for getting the requests from api

(function(){  
    angular
       .module('app')
       .factory('dataService',DataFactory);

       DataFactory.$inject = ['$http']

       function DataFactory($http){
          var service = {};

          service.saveHotels = function(){
            return $http.get('/hotels/saveHotelsData');
          };

          service.getHotels = function(){
            return $http.get('/hotels/getHotelsData'); 
          }
          return service;

       }

})();

Answer 1

It might be that when the function getTopHotels is called the first time by its usage in the ng-repeat it returns [] because the promise hasn't been resolved yet. Once the promise is resolved top_hotels changes its value from [] to the values coming in response.data.data. Since the value over which the ng-repeat is iterating changed, it re-evaluates the expression and then the function is called again.

So, instead of calling the function directly from the ng-repeat, you should use a variable and initialize it when the controller is initialized. Something like this:

html

<div class="item" ng-repeat="hotel_item in hotelLstCntrl.top_hotels">
  <!-- --!>
</div>

controller

// ...
vm.top_hotels = []; // I used the same name you used for this var,
                    // but try to follow a standard for variable names

init(); // I used a new function for initialization for good practice
        // but feel free to call `getTopHotels` directly here,
        // no need to create a new function

function init() {
  getTopHotels();
}

function getTopHotels(){
  // ...
  dataService.getHotels().then((response)=>{
    vm.top_hotels = response.data.data;
  });
  // ...
}