I am utilizing a table that is populated through a REST request to

http://localhost:8080/Sprint002b/restpatent/

Upon clicking on an item within the table, which can be found in list-patents.htm, a separate container appears in patent-item.htm. This container contains a tab panel with 3 tabs and it should display all relevant information from the JSON file corresponding to the selected item.

Having referred to How can I pull data (JSON) from a clicked ng-repeat item to load a new, item specific page using $stateParams and ui-router?, I have successfully implemented the functionality provided. However, I am now uncertain about the next steps.

The tab panel loads upon clicking a ui-sref in the table to a ui-view below it, but currently only displays placeholder content. How can I populate the tab panel with data from the JSON file related to the clicked item? Apologies if this is unclear.

list-patents.htm

<table class="table table-bordered table-striped text-md-center">
  <thead class="thead-inverse">
    <tr>
      <td ng-click="patentAppOrder()" class="align-middle">Application No. </td>
      <td class="align-middle">Client Ref</td>
      <td class="align-middle">Cost to renew</td>
      <td class="align-middle">Basket</td>
      <td class="align-middle">Remove</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in patents">
      <td><a ui-sref="patents.list.item">{{x.applicationNumber}}</a></td>
      <td ng-bind="x.clientRef"></td>
      <td ng-bind="x.costToRenew">$</td>
      <td ng-bind="x.renewalDueDate"></td>
      <td>
        <button type="button" class="btn btn-danger" ng-click="remove(x.id)">Remove</button>
      </td>
    </tr>
  </tbody>
</table>
<div ui-view></div>

patent-item.htm

<div id="tabs">
  <ul>
    <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
    <!--applies active to the returned tab url -->
  </ul>
  <div id="mainView">
    <div class="row">
      <div ng-include="currentTab"></div>
    </div>
  </div>
</div>
<script type="text/ng-template" id="patent-info.htm">
  <div class="col-md-6 text-xs-center">
    <h2>Application Number: <!--data to be loaded--></h2>
    <table class="table table-striped">
      <tbody>
        <tr>
          <td class="font-weight-bold">Short Name</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
        <tr>
          <td class="font-weight-bold">Client Reference</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
        <tr>
          <td class="font-weight-bold">Applicant Name</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
        <tr>
          <td class="font-weight-bold">Application Number</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
        <tr>
          <td class="font-weight-bold">Publication Number</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
        <tr>
          <td class="font-weight-bold">Title</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-md-6 text-xs-center">
    <!--data to be loaded-->
  </div>
</script>
<script type="text/ng-template" id="cost-analysis.htm">
  <!--data to be loaded-->
</script>
<script type="text/ng-template" id="renewal-history.htm">
  <!--data to be loaded-->
</script>

var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router', "chart.js"]);

app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $locationProvider, $urlRouterProvider) {

        $urlRouterProvider
          .when('', '/patents/list-patents')
          .when('/', '/patents/list-patents')
          .when('/patents', '/patents/list-patents')
          .when('/transactions', '/transactions/current-transactions')
          .otherwise('/patents/list-patents');

        $stateProvider
          .state("patents", {
            url: "/patents",
            templateUrl: "templates/patents/patent-nav.htm",
            controller: "patentCtrl"
          })
          .state("patents.list", {
            url: "/list-patents",
            templateUrl: "templates/patents/list/list-patents.htm",
            controller: "patentCtrl"
          })
          .state("patents.list.item", {
            url: "/patent-item",
            templateUrl: "templates/patents/list/patent-item.htm",
            controller: "patentCtrl"
          })


        app.controller('patentCtrl', ['$scope', '$http', 'patentTabFactory', 'loadPatents', '$stateParams', 'patentService', function($scope, $http, patentTabFactory, loadPatents, $stateParams, patentService) {

          patentService.items.then(function(patents) {

            $scope.items = patents.data;
            console.log($scope.patents);
            $scope.patents = patents.data[patentService.getPatentItem($scope.items, "aid", $stateParams.id)];

          });
        }]);