Как показать элемент из массива json один за другим в Angular JS

Я разрабатываю одно прототипное приложение в ионной структуре. Я новичок для угловых js, HTML, CSS, Java Script и всего этого.

У меня есть один json файл, который я использую в качестве ввода. Я могу разобрать этот Json файл и получить от него объект json. Этот объект json содержит массив элементов. Для этого вы можете использовать ниже json-контент. Здесь пункты - это приложение A, B.....

Обновлен вход Json:

{
    "data": [
        {
            "applicationname": "A",
            "permissions": [
                {
                    "text": "at"
                },
                {
                    "text": "at1"
                }
            ]
        },
        {
            "applicationname": "B",
            "permissions": [
                {
                    "text": "bt"
                },
                {
                    "text": "bt1"
                }
            ]
        }
    ]
}

Когда приложение загружается в первый раз, приложение должно загружать только первый элемент из выше json-массива, что означает только данные приложения "A" (первый элемент).

Как только пользователь нажимает на любую кнопку (установить/отменить) в нижнем колонтитуле, он должен изменить свои данные и отобразить содержимое application "B". Этот процесс должен продолжаться до конца массива json.

Мой текущий код не загружает даже данные первого элемента. Я делаю что-то неправильно в HTML?

Обновленный код:

HTML файл:

<ion-header-bar class="bar-calm">
    <h1 class="title">Application Permissions</h1>
</ion-header-bar>
<ion-nav-view name="home" ng-repeat="app in applicationdata">
    <div class="bar bar-subheader bar-positive">
        <h3 class="title"> {{app.applicationname }}</h3>
    </div>
    <ion-content class="has-subheader">
        <div class="list" ng-controller="CheckboxController">
            <ion-checkbox ng-repeat="item in app.permissions" ng-model="item.checked" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)">
                {{ item.text }}
                <h3 class="item-text-wrap"> details come soon </h3>
            </ion-checkbox>
            <div class="item">
                <pre ng-bind="selection | json"></pre>
            </div>
            <div class="item">
                <pre ng-bind="selection1 | json"></pre>
            </div>
        </div>
    </ion-content>
    <ion-footer-bar align-title="left" class="bar-light" ng-controller="FooterController">
        <div class="buttons">
            <button class="button button-balanced" ng-click="infunc()"> Install </button>
        </div>
        <h1 class="title"> </h1>
        <div class="buttons" ng-click="doSomething()">
            <button class="button button-balanced"> Cancel </button>
        </div>
    </ion-footer-bar>
</ion-nav-view>

Файл app.js:

pmApp.controller('CheckboxController', function ($scope, $http, DataService) {


    // define the function that does the ajax call
    getmydata = function () {
        return $http.get("js/sample.json")
            .success(function (data) {
                $scope.applicationdata = data;
            });

    }

    // do the ajax call
    getmydata().success(function (data) {
        // stuff is now in our scope, I can alert it
        $scope.data = $scope.applicationdata.data;
        $scope.devList = $scope.data[0].permissions;
        console.log("data : " + JSON.stringify($scope.data));
        console.log("first application data : " + JSON.stringify($scope.devList));
    });

    $scope.selection = [];
    $scope.selection1 = [];
    // toggle selection for a given employee by name
    $scope.toggleSelection = function toggleSelection(item) {
        var idx = $scope.selection.indexOf(item);
        var jsonO = angular.copy(item);
        jsonO.timestamp = Date.now();

        DataService.addTrackedData(jsonO);
        $scope.selection1 = DataService.getTrackedData();

        // is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);

        }
        // is newly selected
        else {
            DataService.addSelectedData(item);
            $scope.selection = DataService.getSelectedData();
            /* $scope.selection.push(item);*/
        }
    };

});

Проблемы :

1: Почему данные первого элемента не загружаются? Я сделал изменения в HTML в соответствии с моим пониманием.

2: Как я могу перемещаться по всем элементам. Я попробую ответить @Джона Карпентера. Перед тем, как первая проблема должна быть решена.

Пожалуйста, помогите мне, спасибо заранее.