ng-repeat doesn´t load after ng-click

Question

i´ve got an problem with my ng-repeat. After clicking ng-click, my ng-repeat doesn´t load, the page is empty. I´ve got an html file calls "food.html" in which i call the ng-click() further i´ve got an "food-snack.html" file which contains the ng-repeat and at least my "controller.js" where the function of ng-click is calling. I hope someone can help me. Im sorry for my confusing notation but it´s my first blog.

1.food-snack.html

<ion-content class="padding" >
    <ion-refresher pulling-text="Refresh" on-refresh="refreshAll('snack')"></ion-refresher>
    <ion-checkbox class = "item-checkbox-right checkbox-dark" ng-repeat="food in snacks">
        <h2><b>{{food.food}} </b></h2>
        <p>Preis: {{food.price}} {{food.currency}}</p>
    </ion-checkbox>        
</ion-content>

2.food.html

 <ion-content class="padding"> 
    <br><br><br><br><br><br><br>
    <button class = "button button-block button-dark"  ng-click = "getSnacks()"    >    Snacks      </button>
    <button class = "button button-block button-dark"  ng-click = "getSandwich()"  >    Sandwich    </button>
</ion-content>

3.controller.js

.controller('TablesCtrl', function($scope, $stateParams, $ionicPopup, $http, $state, $timeout, Foods) {

$scope.getSnacks = function(){

    $state.go("tab.food-snack"); 
    $http.get('http://xxxxxx/connect.php?getSnacks=1').then(function successCallback(response) 
    {    
        $scope.snacks = Foods.appendAll(response.data);  
        console.log(response);
    },  function errorCallback(response) {
            var confirmPopup = $ionicPopup.confirm({
                title: 'Nicht erfolgreich',
                cancelText: 'Nein',
                okText: 'Ja',
                okType: 'button-dark',
                cancelType: 'button-positive'
            }); 
        });
};//END OF FUNCTION getSnacks()

$scope.getSandwich = function ()
{  
    $state.go("tab.food-sandwich"); 
    $http.get('http://xxxxxx/connect.php?getSandwich=1').then(function successCallback(response) 
    {    
        $scope.sandwich = Foods.appendAll(response.data);  
        console.log(response);
    },  function errorCallback(response) {
            var confirmPopup = $ionicPopup.confirm({
                title: 'Nicht erfolgreich',
                cancelText: 'Nein',
                okText: 'Ja',
                okType: 'button-dark',
                cancelType: 'button-positive'
            }); 
        });
 }// END OF FUNCTION $scope.getSanwich()

4. app.js

.state('tab.foods', {
    cache: false,
    url: '/addTable/foods',
    views: {
        'tab-tables': {
            templateUrl: 'templates/foods.html',
            controller: 'TablesCtrl'
        }
    }
})
.state('tab.food-snack', {
    cache: false,
    url: '/addTable/foods/food-snack',
    views: {
        'tab-tables': {
            templateUrl: 'templates/food-snack.html',
            controller: 'TablesCtrl'
        }
    }
})

5.services.js

.factory('Foods', function() {
   var foods = [];
   return {
    appendAll: function(array) {
        for(var i = 0 ; i < array.length; i++)
        {
            foods.splice(array[i]);
        }
        for (var i = 0; i < array.length; i++) 
        {
            foods.unshift(array[i]);
        }
        return foods;  
    },
    getAll: function() {
        return foods;
    },
    remove: function(food) {
        foods.splice(foods.indexOf(food), 1);
    },
    removeAll: function(array) {
        for( var i = 0 ; i < array.length; i++)
        {
            foods.splice(array[i]);
        }
    },
    get: function(foodId) {
        for (var i = 0; i < foods.length; i++) {
            if (foods[i].id === parseInt(foodId)) {
                return foods[i];
            }
        }
        return null;
    }

Answer 1

The controller you shared is the controller of the food. html I guess and it is adding the snack list to it's scope which is not the scope of snack.html. In the food controller just change the state and in the controller of snacks call the service to get the snacks.