Load more .json in different divs html with angular

Question

I have a div that load a content from a .json file with angular.js

This is the code:

<div class="pbox" id="div1">
    <div ng-app="" ng-controller="customersController">

        <ul>
            <li ng-repeat="x in names">
                {{ x.Name}}
            </li>
            <li ng-repeat="x in names">
                {{ x.Details}}
            </li>
            <li ng-repeat="x in names">
                {{ x.Composizione}}
            </li>
            <li ng-repeat="x in names">
                {{ x.moreDetails}}
            </li>
            <li ng-repeat="x in names">
                <img ng-src="{{x.photo1}}"/>
            </li>
            <li ng-repeat="x in names">
                <img ng-src="{{x.photo2}}"/>
            </li>
            <li ng-repeat="x in names">
                <img ng-src="{{x.photo3}}"/>
            </li>
            <li ng-repeat="x in names">
                <img ng-src="{{x.photo4}}"/>
            </li>
        </ul>

    </div>
    <script>
        $scope.names = {}
        function customersController($scope, $http) {

            $http.get("assets/data/five.json")

                    .success(function (response) {
                        $scope.names = response;
                    });

        }
    </script>
</div>

<div class="pbox" id="div2">
    <div ng-app="" ng-controller="customersController">

        <ul>
            <li ng-repeat="x in names_two">
                {{ x.Name}}
            </li>
            <li ng-repeat="x in names_two">
                {{ x.Details}}
            </li>
            <li ng-repeat="x in names_two">
                {{ x.Composizione}}
            </li>
            <li ng-repeat="x in names_two">
                {{ x.moreDetails}}
            </li>
            <li ng-repeat="x in names_two">
                <img ng-src="{{x.photo1}}"/>
            </li>
            <li ng-repeat="x in names_two">
                <img ng-src="{{x.photo2}}"/>
            </li>
            <li ng-repeat="x in names_two">
                <img ng-src="{{x.photo3}}"/>
            </li>
            <li ng-repeat="x in names_two">
                <img ng-src="{{x.photo4}}"/>
            </li>
        </ul>

    </div>
    <script>
        $scope2.names_two = {}
        function customersController($scope, $http) {

            $http.get("assets/data/five.json")

                    .success(function (response) {
                        $scope.names_two = response;
                    });

        }
    </script>
</div>

Now i wont populate another div with the same fields but with the contents of another .json, not five.json. There is a way to do this? I tried to duplicate all but the second doesen't work. Thanks

Answer 1

You can overwrite the contents of $scope.names . If you want to display both on your screen, you should just copy paste the content, and use another object name.

You should also initiate the object at the start of your controller :

$scope.names = {}

This can prevent bugs in the future. Your browser is faster than your server, so $scope.names doesn't exist until you get your data from the server, or in your case local machine. Which will cause a error.

Your update fiddle: http://jsfiddle.net/p7exvdmf/16/