AngularJS Example:

by Sergio Crisostomo

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<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>

JavaScript

var data = {
    "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"
                        }
                    }
                ]
            }
        }
    }
}

angular.module("app", []);
function HomeCtrl($scope) {
  $scope.data = data.alexa.item.children.child;
}