javascript - Accessing nested urls when using for loop to generate the list items on feed tab -

note: using ionic framework , angular.

short explanation: have json file information. each object file has id, category, title, etc. using loop filling feed tab every object item, quick post, option click read more. loop used because of infinite-scrolling.

problem: when using infinite-scrolling , loop messed , link nested page info every object json file doesn't work. in order take full info item using it's id.

goal
want able when on feed tab click on item , see nested page info it.

edit here link (demo) in plunker. http://embed.plnkr.co/66hgiixngtxouvzgqkvz/preview

i'll post main code here in post too, in case catches someone's eye / app.js

var starter = angular.module('starter', ['ionic'])  starter.run(function($ionicplatform) {   $ionicplatform.ready(function() {      if(window.cordova && window.cordova.plugins.keyboard) {       cordova.plugins.keyboard.hidekeyboardaccessorybar(true);     }     if(window.statusbar) {       statusbar.styledefault();     }   }); })   starter.config(function($stateprovider, $urlrouterprovider) {   $stateprovider     .state('tabs', {       url: '/tab',       abstract: true,       templateurl: 'templates/tabs.html'     })      .state('tabs.home', {       url: '/home',       views: {         'home-tab' : {           templateurl: 'templates/home.html'         }       }     })      .state('tabs.list', {       url: '/list',       views: {         'list-tab' : {           templateurl: 'templates/list.html',           controller: 'listcontroller'         }       }     })      .state('tabs.detail', {       url: '/list/:aid',       views: {         'list-tab' : {           templateurl: 'templates/detail.html',           controller: 'listcontroller'         }       }     });     $urlrouterprovider.otherwise('/tab/home'); });  starter.controller('listcontroller', ['$scope', '$http', '$state',     function($scope, $http, $state) {      $scope.posts = [];       var startingpoint = 0;     var limit = 1;      $scope.load=function(startingpoint, limit){      $http.get('js/data.json').success(function(data) {        for(var = startingpoint; i<=limit; i+=1){           $scope.posts.push(data.posts[i]);           $scope.whichpost=$state.params.aid;       }      })      .finally(function(){                     $scope.$broadcast('scroll.refreshcomplete');                     $scope.$broadcast('scroll.infinitescrollcomplete');                 });      };      $scope.get_more = function(){                 $scope.load(startingpoint, limit);                 limit+=2;                 startingpoint+=2;             };         $scope.nomore = function(){         return ($scope.posts.length > 50) ? false : true;     };  }]); 

the page showing info

<ion-header-bar class="bar-positive">   <h2 class="title"></h2> </ion-header-bar>  <ion-view view-title='full article'>   <ion-content>     <ion-list class="list-inset">       <ion-item class="item-text-wrap" ng-repeat="post in posts | filter: { id:whichpost }:true">           <div class='textwrap'>           <h2 class="articleauth">{{ post.title }}</h2>            <div>           <p class="articledate">by {{post.author}} on {{ post.date }} <span class="category">{{ post.category }}</span></p>       </div>        </div>       <img class='imagephoto' ng-src="{{post.photo}}" alt=''/>       <p class="textwrap">{{ post.description }}</p>   </ion-item> </ion-list> 

data.json example

"id":"1",       "category":"life",       "title":"lorem ipsum dummy text",         "author": "stoyangenchev",       "date": "november 05, 1955",       "photo": "img/test1.jpg",       "description": "lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum." 

main page

<ion-view view-title="newest posts"> <div class="bar bar-subheader    item-input-inset bar-light">   <label class="item-input-wrapper">     <i class="icon ion-search placeholder-icon"></i>     <input type="search" ng-model="query" placeholder="search post">   </label> </div> <ion-content class="has-subheader">     <ion-refresher on-refresh="load()">     </ion-refresher>     <ion-list>         <ion-item ng-repeat='post in posts track post.id | filter: query ' class='item-thumbnail-left item-text-wrap' href="#/tab/list/{{post.id}}">             <img ng-src='{{post.photo}}' />             <div>             <p class='shorttext titlearticle'>                 {{post.title | limitto: 33}}                 {{ post.title.length > 33 ? '&hellip;' : '' }}             </p>                 <img class='articleauthimg' src="img/stoyangenchev.jpg" alt="stoyangenchev-author" />                 </div>             <div class='articleinfo'>             <h2>{{post.author}}</h2>             <h4>{{post.date}}</h4>             <h4 class="category">{{post.category}}</h4>             </div>             <div class="clear"></div>             <p class='shorttext'>                 {{post.description | limitto: 200}}                 {{ post.description.length > 200 ? '&hellip;' : '' }}             </p>         </ion-item>     </ion-list>      <ion-infinite-scroll     ng-if="nomore()"         on-infinite="get_more()"     distance="15%"     >   </ion-infinite-scroll> </ion-content> </ion-view> 

i've never used angular before playing around code think have working. @ least list shows , clicking on item displays it's details.

http://embed.plnkr.co/rado3nheypy4nxdokgyg/preview

really change remove "ng-repeat" tag in detail view content div , fill scope post data in detail controller.

new controller code:

starter.controller('detailcontroller', ['$scope', '$http', '$stateparams',     function($scope, $http, $stateparams) {      $http.get('data.json').success(function(data) {         $scope.post = (data.posts[$stateparams.id-1]);         $scope.id=$stateparams.id;     }); }]); 

hopefully looking or @ least helpful.