javascript - How to show item from json Array one by one in Angular JS -

i developing 1 prototype application in ionic framework. newbie angular js, html, css , java script , stuff.

i have 1 json file using input. able parse json file , able json object this. json object contains array of items. can refer below json content this. here items application a,b.....

updated input json :

{     "data": [         {             "applicationname": "a",             "permissions": [                 {                     "text": "at"                 },                 {                     "text": "at1"                 }             ]         },         {             "applicationname": "b",             "permissions": [                 {                     "text": "bt"                 },                 {                     "text": "bt1"                 }             ]         }     ] } 

when application loads first time, application should load first item above json array means application "a" (first item) data.

once user clicks on button (install/cancel) in footer should changed data , display application "b"'s contents. process should continue till end of json array.

my current code not loading first item data in. doing wrong in html?

updated code :

html file :

<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 </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 file :

pmapp.controller('checkboxcontroller', function ($scope, $http, dataservice) {       // define function ajax call     getmydata = function () {         return $http.get("js/sample.json")             .success(function (data) {                 $scope.applicationdata = data;             });      }      // ajax call     getmydata().success(function (data) {         // stuff in our scope, can alert         $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 given employee 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();          // selected         if (idx > -1) {             $scope.selection.splice(idx, 1);          }         // newly selected         else {             dataservice.addselecteddata(item);             $scope.selection = dataservice.getselecteddata();             /* $scope.selection.push(item);*/         }     };  }); 

problems :

1 : why data of first item not getting loaded? have done changes in html per understanding.

2 : how can navigate through items. try @john carpenter's answer. before first problem should resolved.

please me, in advance.

ok, i'm not 100% sure want i'll take stab @ it. in future, helpful post less code (probably not entire project working on). idea make simpler example "real" one, can learn need learn , go apply "real" code have.

anyways, example simple button click on change displayed.

var app = angular.module('myapplication',[]);    app.controller('mycontroller', ['$scope', function($scope){      $scope.indextoshow = 0;      $scope.items = [          'item 1',           'item 2',           'item 3'      ];            $scope.change = function(){          $scope.indextoshow = ($scope.indextoshow + 1) % $scope.items.length;      };  }]);

.simple-button {    cursor: pointer;  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="myapplication" ng-controller="mycontroller">    <div ng-repeat="item in items track $index" ng-show="$index == indextoshow">      {{item}}    </div>    <div class="simple-button" ng-click="change()">click me!</div>  </div>