Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="DataController">
    <div ng-show="!show">
      <img id="loader" src="resources/ajax-loader.gif" />
    </div>
    <div ng-show="show">
      <div class="ui grid center aligned">
        <div class="column thirteen wide">
          <p>Stuff</p>
          <table id="errorTable" class="ui compact celled definition table"></table>
        </div>
      </div>
    </div>
  </body>
</html>

// Code goes here

var app = angular.module('app', []);
app.controller('DataController', function ($scope, $http) {
var controller = this;
var errors = {};
$scope.show = false;

$http.get("https://jsonplaceholder.typicode.com/posts/1").then(onSuccess, onError);

function onSuccess(response) {
    controller.errors = response.data;
    setTimeout(function () {
        $('#errorTable').DataTable({
            "lengthMenu": [[6], [6]],
            "dom": '<"toolbar">frtip'
        });
        $("div.toolbar").html('<div class="ui input left floated"><input type="text" placeholder="Search..."></div>');
    }, 3000);
    $scope.show = true;
}

function onError(response) {
    console.log(response);
}

});

/* Styles go here */