Доступ к изображениям локального файла JSON в карусели на веб-странице

Question

Где я ошибаюсь? Я не понимаю, как получить доступ к изображениям файла JSON в карусели на веб-странице.

index.html

<!-- Wrapper for slides -->
<div class="carousel-inner">

     <div class="item active" ng-repeat = "carousel in carousels">
         <div class ="item" ng-repeat = "image in carousel.data_list">
        <img ng-src="{{image.img}}" alt="">
      </div>
      </div>
</div> 

data.json

{
    "view_type": 1,
    "position": 1,
    "data_list": [
        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
                   teens/goli_kota.jpg",
            "name":"http://www.golivadapav.com/"
        },
        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
                          teens/allen1.jpg",
            "name":"https://www.allen.ac.in/"
        },
        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
              teens/goli_ald.jpg",
            "name":"http://www.golivadapav.in/"
        },
        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
               teens/ali4.png",
            "name":"https://www.aliexpress.com/"
        }

    ]}  

app.js

var app = angular.module('carouselApp', []);

app.controller('carouselController', function($scope, carouselsFactory){
    $scope.carousels;

    carouselsFactory.getCarousels().then(function(response){
       $scope.carousels = response.data; 
    });

    $scope.sayHello = function(){
        console.log("Hello");
    }
});

app.factory('carouselsFactory', function($http){

    function getCarousels(){
        return $http.get('data.json');
    }

    return {
        getCarousels: getCarousels
    }
});    

Answer 1

$ scope.carousels - это объект, и ng-repeat работает над массивами.

Это должен быть ожидаемый код

<div class="item active">
    <div class ="item" ng-repeat = "image in carousel.data_list">
        <img ng-src="{{image.img}}" alt="">
    </div>
</div>