https://code.angularjs.org/2.0.0-alpha.31/angular.js

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@2.0.0-alpha.31" data-semver="2.0.0-alpha.31" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="RestApiApp">

    <table ng-controller="jsonTableCtrl">
      <tbody>
        <tr>
          <td>
            {{dataJson}}
            {{dataXml}}
          </td>
        </tr>
      </tbody>
      
      
    </table>


  


  


  </body>

</html>

// Code goes here
'use strict';

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

app.controller("jsonTableCtrl", function ($scope, $http) {
  var tableArray = [];
  //setTimeout(getJson,5000);
  getXml();
  
  function getJson(){
    $http.get('data.json').success(function(data){
    data.person.forEach(function(singleData){
      tableArray.push(singleData);
    });
  });
  }
  function getXml(){
    $http.get('data.xml').success(function(data){
      console.log(data);
      $scope.dataXml = data;
    
  });
  }
});

/* Styles go here */

{
    "person": [
        {
            "id": 10,
            "firstName": "John",
            "lastName": "Doe"
        },
        {
            "id": 5,
            "firstName": "Jack",
            "lastName": "Doe"
        },
        {
            "id": 7,
            "firstName": "James",
            "lastName": "Doe"
        }
    ]
}

<?xml version="1.0" encoding="UTF-8"?>
<persons>
   <person>
      <id>3</id>
      <firstName>Jen</firstName>
      <lastName>Doe</lastName>
   </person>
   <person>
      <id>6</id>
      <firstName>Stephanie</firstName>
      <lastName>Joe</lastName>
   </person>
   <person>
      <id>1</id>
      <firstName>Victoria</firstName>
      <lastName>Doe</lastName>
   </person>
</persons>