Load JSON data in angularjs

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app='myApp'>
    <div ng-controller='DataCtrl'>
        <button ng-click="loadData()">load data</button>
        
<h1>Data</h1> 
        <div ng-repeat="item in items">
             <h2>{{item.field1}}</h2>

            <table class="table">
                <tr ng-repeat="(key,value) in item">
                    <td>{{key}}</td>
                    <td>{{value}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

JavaScript

var mockData = "json=" + encodeURI(JSON.stringify([{
    "name": "Christmas Eve",
        "country": "US",
        "date": "2015-12-24"
}, {
    "name": "Christmas",
        "country": "US",
        "date": "2015-12-25"
}, {
    "name": "First Day of Kwanzaa",
        "country": "US",
        "date": "2015-12-26"
}, {
    "name": "Second Day of Kwanzaa",
        "country": "US",
        "date": "2015-12-27"
}]));



var App = angular.module('myApp', []);

function DataCtrl($scope, $http) {

    $scope.phones = [];

    $scope.loadData = function () {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockData

        }).success(function (data, status) {
            $scope.items = data;
        });

    };

}