Fetch the array above $ http and view in ionic element of ionic list

As in the title, I am trying to assign a list from a $ http request and then see that list in the view.

I believe the problem is that the view is rendered before the data is loaded, if I understand ion correctly. And the view is never updated when variables change.

I was told that the solution is one way to fix it, but I would prefer the view to change and then show a loading progress bar while it waits for the HTTP request to complete and then show the list.

Thank!

Edit: I think I need to add a way to load data via ng-init in the html file, which seems to be wrong too. Is there a better way at all?

view html file:

<ion-view view-title={{ListName}} ng-init="getList()">
    <ion-content ng-controller="ListCtrl">
        <ion-list>
            <ion-item ng-repeat="item in list"
                      class="item-thumbnail-left">

                {{item.id}}
               <img ng-src="{{item.thumbnail}}">
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

      

        
        
        
      

    

fragment of controller:

.controller('ListCtrl', function($scope){
  $scope.list = []
  $scope.ListName = ''


  $scope.getList = function(){
     $scope.ListName = 'list'

     $scope.list = [{id: 1, thumbnail:null}, {id: 2, thumbnail:null},{id: 3, thumbnail:null} ,{id: 4, thumbnail:null}]

}

})

      

        
        
        
      

    

the list is actually obtained in an HTTP request that returns a promise, but that gives me the same problem. This is something annoyingly basic that I just don't understand about ionic yet