HTML не заполнен Угловыми данными

Question

У меня есть некоторый угловой код, где вызывается API, и я получаю нужные данные.

Но тогда ни одна из переменных не заполняется в HTML.

У меня нет изображения или кнопка загрузки не имеет текста.

Я был вокруг этого и не могу найти ответ.

Я что-то упустил из-за своего объема?

<script type="text/javascript"> 

    var application = angular.module('Application', []); 

    application.service('ImageService', function ($http) { 
    return { 
     GetList: function (ipage) { 
     return $http.get('api/images', { params: { ipage: ipage } }); 
     }, 
    } 
    }); 

    application.controller('ImageController', function ImageController($scope, ImageService) { 

    $scope = { 
     images: [], 
     loading: false, 
     pages: { instagram: '12' }   
    } 

    var load = function() { 
     $scope.loading = true; 
     ImageService.GetList($scope.pages.instagram) 
     .success(function (data, status, headers, config) { 
      $scope.images = $scope.images.concat(data.Images) 
      $scope.pages.instagram = data.NextInstagramPage; 
     }) 
     .error(function (data, status, headers, config) { }) 
     .finally(function() { 
      $scope.loading = false 
     });; 
    } 

    $scope.loader = function() { 
     return $scope.loading ? 'loading' : 'load more'; 
    } 

    $scope.reload = function() { 
     load(); 
    } 

    load(); 

    }); 

</script> 

<div data-ng-app="Application" data-ng-controller="ImageController" class="gallery"> 
    <div data-ng-repeat='image in images' class="image"> 
    <img src="{{image.Url}}" alt="" /> 
    <a href="" class="reload" data-ng-disabled={{loading}} data-ng-click="reload()">{{loader()}}</a>  
</div> 

Answer 1

Проблема заключается в том, что вы перезаписать $scope объект полностью, когда вы назначаете ему новый объект, такой как $scope = {...};. Вместо этого вы можете расширить сферу с несколькими дополнительными свойствами:

angular.extend($scope, { 
    images: [], 
    loading: false, 
    pages: { 
     instagram: '12' 
    } 
}); 

Вы также можете установить индивидуальные свойства отдельно:

$scope.images: []; 
$scope.loading = false; 
$scope.pages = { instagram: '12' }; 

Answer 2

Похоже, ваш контроллер не inited справедливо пытаются

application.controller('ImageController', ['$scope', 'ImageService' ,function ImageController($scope, ImageService) { ...}]); 

и ваш сервис тот же:

application.service('ImageService',['$http', function ($http) {...}]);