Drupal 8 angularjs tabbed UI with json

page--node--prefix--suffix-report.html.twig

<!-- Fixed navbar -->
{% include directory ~ '/partials/header.html.twig' %}

{# page-banner #}
<div class="container-fluid">
<div class="row">
 <div class="col-md-12">
   <div id="page-title-bg" style="background-image: url('{{ file_url(node.field_image.entity.fileuri) }}')"></div>
 </div>
</div>
</div>
{# End page-banner #}

<!-- contain -->

<div class="container" id="main-container" ng-app="appPS" ng-init="prefixSuffixes">
  {# Main content #}
  <div class="row">
    <div class="col-md-12">{{ page.title_bar }}</div>
  </div>

  <div class="row content-wrapper" ng-controller="prefixSuffixCtrl">
    {# Left-side bar #}

    <div class="col-md-9">

            <div class="row padding-left0">
              <div class="col-md-12">
                <div ng-disabled="enable=='false'">
                          <center ng-show="loadingText == 'Loading ...'"><i class="fa fa-spinner fa-spin fa-2x fa-fw"></i><span class="sr-only">Loading...</span></center>
                        </div>
              </div>
            </div>

          {# content goes here #}
          <div class="row">
            <div class="col-md-12">
              <ul style="list-style-type:none; float:right;" <li><a href="#" onclick="window.open('https://planning.lacity.org/dcpapi/general/prefixsuffix/active/pdf/');
window.open('https://planning.lacity.org/dcpapi/general/prefixsuffix/active/csv/')">Active Codes </a></li>
<li><a href="#" onclick="window.open('https://planning.lacity.org/dcpapi/general/prefixsuffix/inactive/pdf/');
window.open('https://planning.lacity.org/dcpapi/general/prefixsuffix/inactive/csv/')">Inactive Codes </a></li>
</ul>
              <ul id="list-horizontal" class="padding-left0">

                <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(taba)}" ng-click="onClickTab(tab)">
                  <a href="#" ng-click="setFilter(tab)" ng-class="{active : filt === tab}">{[{tab}]}</a>
                  <span style="padding-left: 5px;">|</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 table-responsive ps-tab tab-1" ng-class="{'fadein active': currentTab=='Active Prefixes' || currentTab=='All'}" ng-if="PrefixActive" ng-show="visible===true | json">

              <h5>Active Prefixes</h5>
              <table class="table table-hover">
                <colgroup>
                  <col class="col-md-2">
                  <col class="col-md-4">
                  <col class="col-md-3">
                </colgroup>

                <thead>
                  <tr >
                    <th>Prefix</th>
                    <th>Description</th>
                    <th>Note</th>
                  </tr>
                </thead>

                <tbody>
                  <tr ng-repeat="item in PrefixActive track by $index">
                    <td>{[{ item.prefix }]}</td>
                    <td>{[{ item.desc }]}</td>
                    <td>{[{ item.note }]}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 table-responsive ps-tab tab-2" ng-class="{'fadein active': currentTab=='Active Suffixes' || currentTab=='All'}" ng-if="SuffixActive" ng-show="visible===true | json">

              <h5>Active Suffixes</h5>
              <table class="table table-hover">
                <colgroup>
                  <col class="col-md-2">
                  <col class="col-md-4">
                  <col class="col-md-3">
                </colgroup>

                <thead>
                  <tr>
                    <th>Suffix</th>
                    <th>Description</th>
                    <th>Note</th>
                  </tr>
                </thead>

                <tbody>
                  <tr ng-repeat="item in SuffixActive track by $index ">
                    <td>{[{ item.suffix }]}</td>
                    <td>{[{ item.desc }]}</td>
                    <td>{[{ item.note }]}</td>

                  </tr>

                </tbody>
              </table>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 table-responsive ps-tab tab-3" ng-class="{'fadein active': currentTab=='Inactive Prefixes' || currentTab=='All'}" ng-if="PrefixInactive" ng-show="visible===true | json">
              <h5>Inactive Prefixes</h5>
              <table class="table table-hover">
                <colgroup>
                  <col class="col-md-2">
                  <col class="col-md-4">
                  <col class="col-md-3">
                </colgroup>

                <thead>
                  <tr >
                    <th>Prefix</th>
                    <th>Description</th>
                    <th>Note</th>
                  </tr>

                </thead>

                <tbody>

                  <tr ng-repeat="item in PrefixInactive track by $index">
                    <td>{[{ item.prefix }]}</td>
                    <td>{[{ item.desc }]}</td>
                    <td>{[{ item.note }]}</td>
                  </tr>

                </tbody>
              </table>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 table-responsive ps-tab tab-4" ng-class="{'fadein active': currentTab=='Inactive Suffixes' || currentTab=='All'}" ng-if="SuffixInactive" ng-show="visible===true | json">


              <h5>Inactive Suffixes</h5>
              <table class="table table-hover">
                <colgroup>
                  <col class="col-md-2">
                  <col class="col-md-4">
                  <col class="col-md-3">
                </colgroup>

                <thead>
                  <tr>
                    <th>Suffix</th>
                    <th>Description</th>
                    <th>Note</th>
                  </tr>
                </thead>

                <tbody>
                  <tr ng-repeat="item in SuffixInactive track by $index ">
                    <td>{[{ item.suffix }]}</td>
                    <td>{[{ item.desc }]}</td>
                    <td>{[{ item.note }]}</td>
                  </tr>

                </tbody>

              </table>
              <div></div>


            </div>


        {# End Left-side bar #}
      </div>
    </div>
    {# Right-side bar #}
    <div class="col-md-3 sidebar-menu hidden-sm hidden-xs">
      <div class="top-bar"></div>
      {{ page.side_menu }}
    </div>
  </div>
</div>
{# End Right-side bar #}
</div>

{# End container #}
{# End Right-side bar #}
<!-- // .container -->

{# End container #}



<!-- footer section -->
{{ attach_library ('cpv3/jsonp-array') }}
{{ attach_library ('cpv3/prefix-suffix-report') }}
{{ attach_library ('cpv3/angular-js') }}
{% include directory ~ '/partials/footer.html.twig' %}

prefixSuffix.js

var app = angular.module('appPS', ['ngSanitize', 'ngRoute', 'ngAnimate', 'ui.bootstrap', 'angular-toArrayFilter'])
  .service('prefixSuffixService', function($http) {
    this.getRecord = function() {
      return $http.get("https://planning.lacity.org/dcpapi/general/prefixsuffix/data");
    }
  })
  .config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
  });

app.controller('prefixSuffixCtrl', ['$scope', '$http', '$filter', 'prefixSuffixService', function($scope, $http, $filter, prefixSuffixService) {
  prefixSuffixService.getRecord().then(function(response) {
    $scope.prefixSuffixes = response.data
    // splits json arrays into their own scopes
    for (var k in response.data) {
      $scope[k] = response.data[k]
    }
    //console.log($scope.PrefixActive)
  //  console.log($scope.SuffixActive)
  //  console.log($scope.PrefixInactive)
  //  console.log($scope.SuffixInactive)

    $scope.filt = 'All'
    $scope.setFilter = function(tab) {
      $scope.filt = tab

    }
    $scope.isActiveTab = function(taba) {
      return (taba)
    }
    $scope.currentTab = $scope.isActiveTab;
    $scope.tabs = ['All', 'Active Prefixes', 'Active Suffixes', 'Inactive Prefixes', 'Inactive Suffixes'];

  //  console.log($scope.tabs)
  //  console.log("output of tabs scope")

  })
  $scope.onClickTab = (function(taba) {
    $http.get("https://planning.lacity.org/dcpapi/general/prefixsuffix/data").then(function(response, data, status) {
// splits json arrays into their own scopes
      for (var k in response.data) {
        $scope[k] = response.data[k]
      }

    //  console.log($scope.PrefixActive)
    //  console.log($scope.SuffixActive)
  //    console.log($scope.PrefixInactive)
  //    console.log($scope.SuffixInactive)


      $scope.currentTab == taba;

      if (taba == 'All') {

        $scope.currentTab = ('All')
        console.log('All')
        console.log('This is current tab: ' + $scope.currentTab)
        if ($scope.prefixSuffix !== $scope.currentTab) {
      //    alert("All");
          $scope.visible = true
          //console.log('is visible')
          $scope.PrefixActive
          $scope.SuffixActive
          $scope.SuffixInactive
          $scope.PrefixInactive

        } else {
          $scope.visible = false;
        //  console.log('is not visible')
        }
      }

      if (taba == 'Active Prefixes') {
        $scope.PrefixActive
        $scope.currentTab = ('Active Prefixes')
        console.log('Active Prefixes')
        console.log('This is current tab: ' + $scope.currentTab)
        if ($scope.PrefixActive !== $scope.currentTab) {
        //  alert("Active Perfixes");
          $scope.visible = true
          $scope.prefixSuffixes = false
          $scope.SuffixActive = false
          $scope.SuffixInactive = false
          $scope.PrefixInactive = false
          $scope.PrefixActive
        //  console.log('is visible')
        //  console.log($scope.PrefixActive)
        } else {
          $scope.visible = false;
        //  console.log('is not visible')
        }
      }

      if (taba == 'Active Suffixes') {
        $scope.SuffixActive
        $scope.currentTab = ('Active Suffixes')
      //  console.log('Active Suffixes')
      //  console.log('This is current tab: ' + $scope.currentTab)
        if ($scope.SuffixActive !== $scope.currentTab) {
          //alert("Active Suffixes");
          $scope.visible = true
          $scope.prefixSuffixes = false
          $scope.PrefixActive = false
          $scope.SuffixInactive = false
          $scope.PrefixInactive = false
          $scope.SuffixActive
        //  console.log('is visible')
        } else {
          $scope.visible = false;
        }
      }

      if (taba == 'Inactive Prefixes') {
        $scope.PrefixInactive
        $scope.currentTab = ('Inactive Prefixes')
      //  console.log('Inactive Prefixes')
        if ($scope.PrefixActive !== $scope.currentTab) {
      //    alert("Inactive Perfixes");
          $scope.visible = true
          $scope.prefixSuffixes = false
          $scope.PrefixActive = false
          $scope.SuffixActive = false
          $scope.SuffixInactive = false
          $scope.PrefixInactive
        //  console.log('is visible')
        } else {
          $scope.visible = false;
        }
      }

      if (taba == 'Inactive Suffixes') {
        $scope.SuffixInactive
        $scope.currentTab = ('Inactive Suffixes')
      //  console.log('Inactive Suffixes');
        if ($scope.SuffixInactive !== $scope.currentTab) {
        //  alert("Inactive Suffixes");
          $scope.visible = true
          $scope.prefixSuffixes = false
          $scope.PrefixActive = false
          $scope.SuffixActive = false
          $scope.PrefixInactive = false
          $scope.SuffixInactive
        } else {
          $scope.visible = false;
        }
      }

    })
  })
}]);