AngularJS + Bootstrap 4 Modal + Table Pagination Notes

<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/angular-toastr@2.1.1/dist/angular-toastr.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script src="https://unpkg.com/angular-toastr@2.1.1/dist/angular-toastr.tpls.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ui-bootstrap4@3.0.5/dist/ui-bootstrap-tpls-3.0.5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js"></script>
    <script src="script.js"></script>
    <script src="submit.js"></script>
  </head>
  <body ng-controller="MyCtrl">
    <!-- SHOW / HIDE -->
    <ng-container>
      <!-- TABLES, FILTERING, AND PAGINATION -->
      <div class="container rounded bg-light p-5">
        <input type="text" class="form-control my-3" placeholder="Filter..." ng-model="filterText">
        <div class="table-responsive">
          <table class="table table-bordered table-hover">
            <thead>
              <tr>
                <th ng-repeat="key in labels">
                  <a href="#" ng-click="sortColumn(key)">
                  <span class="text-uppercase">{{key}}</span>
                  <span ng-show="orderByField == key">
                    <span ng-show="!sortByDescending">
                    <i class="fas fa-angle-up"></i>
                    </span>
                    <span ng-show="sortByDescending">
                    <i class="fas fa-angle-down"></i>
                    </span>
                  </span>
                  </a>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr ng-click="openModal(item)" ng-repeat="item in filterData = (data | filter: filterText | orderBy : orderByField : sortByDescending) | limitTo:itemsPerPage:itemsPerPage*(currentPage-1)" ng-class="{ 'text-white bg-info': item == selected }">
                <td class="text-underline cursor-pointer" ng-repeat="key in labels">{{item[key]}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <ul class="d-flex justify-content-center" uib-pagination total-items="filterData.length" items-per-page="5" ng-model="currentPage" max-size="5" boundary-link-numbers="3" ng-change="pageChanged()"></ul>
      </div>
    </ng-container>

    <!-- MODAL -->
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body" id="modal-body">
      <!-- ANGULAR CHARTS -->
      <div class="container rounded bg-light p-5">
        <canvas id="bar" class="chart chart-bar"
          chart-data="data" chart-labels="labels" chart-series="series">
        </canvas>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </div>
    </script>
  </body>
</html>

var app = angular.module('myApp', ['toastr', 'ui.bootstrap', 'chart.js']);
app.controller('MyCtrl', function(
  $scope,
  $http,
  toastr,
  $log,
  $document,
  $uibModal
) {
  $scope._ = _;
  $scope.labels = [];
  $scope.data = [];

  // Table & Pagination
  // PAGINATION
  $scope.currentPage = 1;
  $scope.itemsPerPage = 5;
  // Selection
  $scope.selected = undefined;

  $scope.pageChanged = function() {
    console.log($scope.currentPage);
  };

  $scope.sortColumn = function(key) {
    $scope.orderByField = key;
    $scope.sortByDescending = !$scope.sortByDescending;
  }

  // HTTP GET
  $scope.getData = function() {
    $http.get('https://s3-us-west-2.amazonaws.com/s.cdpn.io/656755/subway.json').then(
      response => {
        $scope.data = response.data.subwayData;
        $scope.labels = _.keys($scope.data[0]);
        // Table Sorting
        $scope.sortColumn($scope.labels[0]);

        toastr.success("Data populated", 'Success');
      },
      error => {
        toastr.error('Data not populated', 'Error');
      }
    );
  };

  // Temporary Use this instead of calling
  $scope.getData();

  // Modal
  $scope.openModal = function(selected) {
    $scope.selected = selected;

    const filtered = $scope.data.filter(item => {
      return item.STATION === selected.STATION;
    });

    var modalInstance = $uibModal.open({
      animation: true,
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        selected: function() {
          return filtered;
        },
      },
    });
    // Modal Instance
    modalInstance.result.then(
      function(selected) {
        $scope.selected = selected;
        toastr.success('Modal Closed', 'Success');
      },
      function() {
        // toastr.error('Modal Cancelled', 'Error');
      }
    );
  };
});

// Modal Instance
app.controller('ModalInstanceCtrl', function(
  $uibModalInstance,
  selected,
  $scope
) {
  // Angular-Chart.js
  selected = _.orderBy(selected, ['TIMESTAMP'], ['asc']);
  $scope.labels = _.map(selected, (item) => item.TIMESTAMP);
  $scope.series = ['ENTRIES', 'EXITS'];

  $scope.data = [
    _.map(selected, (item) => item.ENTRIES),
    _.map(selected, (item) => item.EXITS),
  ];

  $scope.selected = selected;

  $scope.ok = function() {
    $uibModalInstance.close($scope.selected);
  };

  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
});

/* Styles go here */