Reload Ionic List After the Ajax Response is Received

1

I have a ion-list in my template which is tied to VegetableListController. I want to fetch the data from a remote server and then refresh the ion-list. I can successfully fetch the data and I can see the results are correct (by printing them to the console) but the ion-list never refreshes with the new data. How can I make that happen?

I have replaced the original URL with fake URL but please assure that by using the original URL I can easily fetch the items from the remote service.

// Controllers
.controller(‘VegetableListController’,function($scope){

$scope.vegetables = [];

$scope.getAllVegetables = function() {

  $.get('http://somewebsite/something/getsomething',function(response){

        $.each(response,function(index,value) {
            console.log(value.Name);
            $scope.vegetables.push(value.Name);
        });
  });
}
// get all the vegetables 
$scope.getAllVegetables();

})

This is the list.html code: I cannot paste the list.html code since the editor keeps formatting it incorrectly.

{{vegetable.Name}}

This is the index.html page:

<ion-pane>

  <ion-nav-bar class="bar bar-header bar-balanced">
    <ion-nav-back-button class="button-clear">
      <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
  </ion-nav-bar>

    <ion-nav-view class="has-header"></ion-nav-view>

</ion-pane>