Tabs Subpage Master / Detail List

ionic-v1
1

I am creating a app not too complex, trying to learn the ionic framework and Angular JS, I have done the codecademy tut, the Lynda tutorial, I recently purchased a few books to dive in.
However at the moment I am stuck, trying to pass in data to a sub page in order to get more details.

say we return a json like:

{"headers":["Date","Time","Book No","Author","Publisher","ISBN-13","ISBN-10","Title","DatePublished","DateCheckedOut","Library","Phone","status"],"rows":[["8/24/2015","9:40:41 AM","AE-2015082400013920","STEVEN KING","SIMON AND CHUSTER","","","FINDERS KEEPERS","JUNE 2ND 2015","AUGUST 31ST 2015","JOHN F. GERMANY","8135458970",null]

Config

app.config(function($stateProvider, $urlRouterProvider) {
.state('tabs.feed', {
      url: "/feed",
      views: {
        'feed-tab': {
          templateUrl: "templates/feed.html",
            controller: 'FeedController'
        }
      }
    })
   .state('tabs.detail', {
      url: "/feed/:bookId",
      views: {
        'feed-tab': {
          templateUrl: "templates/detail.html",
            controller: 'BookController'
        }
      }
    });
       $urlRouterProvider.otherwise("/tab/home");
});

Controller

app.controller('FeedController', ['$scope', '$http', '$state',
    function($scope, $http, $state) {
    $http.get('js/test.json').success(function(data) {
     $scope.booklog = data.rows;
     $scope.whichbook=$state.params.bookId;
    });
}]);

View

//Feed Page (Master List)

 <ion-view view-title="Feed" view-name="feed-tab">
<ion-pane padding="true">
      <div class="bar bar-subheader item-input-inslet">
    <label class="item-input-wrapper">
          <i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder="Search">
          </label>
    </div>
<ion-content ng-controller="FeedController" class="has-subheader" >
    <ion-list >
    <ion-item collection-repeat="item in booklog" class="item-thumbnail-left" href="#/tab/detail/{{item[2]}}">
        <img ng-src="//placehold.it/25x25" alt="Tow">
      
        <h3>{{item[5]}} {{item[3]}} {{item[4]}} </h3>
   
            <h5>{{item[6]}} {{item[7]}}</h5>
    
        <h6>{{item[8]}} {{item[9]}}</h6>
     
        <h6>{{item[10]}} {{item[11]}}</h6>
        </ion-item>
        </ion-item>
    </ion-list>
    </ion-content>
      </ion-pane>
      </ion-view>

…

//detail.html

      <ion-view view-title="More Info">
  <ion-content>
    <ion-list class="list-inset">
    <ion-item collection-repeat=item in booklog |filter: { {{item[2]}} : whichbook}>
        <img ng-src="//placehold.it/25x25" alt="Book">
        <h3>{{item[5]}} {{item[3]}} {{item[4]}}</h3>
        <h3>{{item[0]}} {{item[1]}} {{item[2]}}</h3>
            <h5>{{item[6]}} {{item[7]}}</h5>
        <h6>{{item[8]}} {{item[9]}}</h6>
        <h6>{{item[10]}} {{item[11]}}</h6>
          </ion-item>
    </ion-list>
  </ion-content>