Read JSON and show in html using Angularjs

Question

I’m trying to read the data of a Json file in html using Angularjs, but I’m not getting it.
Follows part of the index.html code:

    <div ng-app="app">
        <div class="page-header" id="principal" ng-controller="HomeCtrl">
            <div class="divpai" style="width:950px; height: 734px; background-color:#F3E10A" align="center">
                <table class="tclass">
                    <tr>
                        <td style="text-align: center;">
                            <button id="btf1" ng-repeat="menus in mock(0,4)" class="btf" style="width:416px; height: 79px; background-color:#2E5491">{{response.id}}</button>
                        </td>
                        <td style="text-align: center;">
                            <button id="btf5" ng-repeat="menus in mock(4,8)" class="btf" style="width:416px; height: 79px; background-color:#2E5491">{{response.id}}</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

Follow code from JSON:

{
    "alexa": {
        "#text": "",
        "item": {
            "@attributes": {
                "name": "MenuPrincipal",
                "label": "Menu Principal"
            },
            "#text": "",
            "children": {
                "#text": "",
                "child": [{
                        "@attributes": {
                            "id": "mnu1"
                        }
                    },
                    {
                        "@attributes": {
                            "id": "mnu2"
                        }
                    },
                    {
                        "@attributes": {
                            "id": "mnu3"
                        }
                    },
                    {
                        "@attributes": {
                            "id": "mnu4"
                        }
                    },
                    {
                        "@attributes": {
                            "id": "mnu5"
                        }
                    },
                    {
                        "@attributes": {
                            "id": "mnu6"
                        }
                    },
                    {
                        "@attributes": {
                            "id": "mnu7"
                        }
                    },
                    {
                        "@attributes": {
                            "id": "mnu8"
                        }
                    }
                ]
            }
        }
    }
}

Finally follow the code of my controller.JS:

var app = angular.module('app', []);
app.controller('HomeCtrl', function($scope, $http) {

    $http.get('mock.json').then(function(response) {
        $scope.data = response.data;
    });
});

I have read some questions but still can not find a solution to the case, and in the documentation I could not find a satisfactory solution no example for a beginner as I solve.

Answer 1

Use so in Angular:

$http.get('mock.json').then(function(response) {
  $scope.data = response.data.alexa.item.children.child;
});

and then in the template:

<div ng-app="app">
    <div class="page-header" id="principal" ng-controller="HomeCtrl">
        <div class="divpai" style="width:950px; height: 734px; background-color:#F3E10A" align="center">
            <table class="tclass">
                <tr>
                    <td style="text-align: center;">
                        <button id="btf1" ng-repeat="menu in data.slice(0,4)" class="btf" style="width:416px; height: 79px; background-color:#2E5491">{{menu['@attributes'].id}}</button>
                    </td>
                    <td style="text-align: center;">
                        <button id="btf5" ng-repeat="menu in data.slice(4,8)" class="btf" style="width:416px; height: 79px; background-color:#2E5491">{{menu['@attributes'].id}}</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

Example: http://jsfiddle.net/Sergio_fiddle/x2nbcmu2/

Answer 2

From what I understand it must be this:

var info = null;
$http.get('algumacoisa.json').success(function(data) {
    info = data;
});