ng-repeat won't show json data

Question

This question may have been asked before, but I can't seem to find any answer that help me out.

I'm trying to fetch some data from a local .json file, which is working fine. The console.log() is showing me an array of objects, but for some reason, my ng-repeat isn't showing it on my view.

This is what I have so far:

View

<ul class="nav nav-list">
    <li ng-repeat="item in items">
        <a href="{{item.url}}">
            <i class="menu-icon fa {{item.icon}}"></i>
            <span class="menu-text">{{item.title}}</span>
        </a>
    </li>
</ul>

MainController This controller is used with my view above

angular.module("Jorrex").controller("MainController", [
    "$scope", "$location", function ($scope, $location) {
        $.getJSON("jorrex.json").done(function (data) {
            $scope.items = data.items[0].menu;
        });

    }
]);

JSON

{
    "items": [{
        "menu": [{
            "title": "Home",
            "url": "#/Home",
            "icon": "fa-home"
        }, {
            "title": "Portfolio",
            "url": "#/Portfolio",
            "icon": "fa-tasks"
        }, {
            "title": "Skills",
            "url": "#/Skills",
            "icon": "fa-spin fa-cog"
        }, {
            "title": "Contact",
            "url": "#/Contact",
            "icon": "fa-envelope"
        }, {
            "title": "Work",
            "url": "#/Work",
            "icon": "fa-code"
        }, {
            "title": "Gaming",
            "url": "#/Gaming",
            "icon": "fa-gamepad"
        }, {
            "title": "Trophies",
            "url": "#/Gaming/Trophies",
            "icon": "fa-trophy"
        }, {
            "title": "To-Do List",
            "url": "#/Gaming/ToDoList",
            "icon": "fa-check-square"
        }, {
            "title": "About",
            "url": "#/About",
            "icon": "fa-info-circle"
        }]
    }]
}

What am I doing wrong or am I missing? As a sidenote, I didn't paste in the complete json file, because it's quite large. This is just the part I'm using in my code.

It's actually showing an empty <ul> element when I load my page.

UPDATE

When I put this sample array with one object, it actually shows me some results:

$scope.items = [
    {
        url: "#/Home",
        icon: "fa-home",
        title: "Home"
    }
];

Answer 1

Use $http service from angular if you don't want to use $apply:

    // Simple GET request example:
    $http({
      method: 'GET',
      url: '/someUrl'
    }).then(function successCallback(response) {
      // this callback will be called asynchronously
      // when the response is available
    }, function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

See the doc: https://docs.angularjs.org/api/ng/service/$http

Answer 2

As $.getJSON is not component of angularjs , you need to apply for change.

Try like this

$scope.$apply(function(){
   $scope.items = data.items[0].menu;
})