http.html

<style type="text/css">
  input,
  select,
  textarea {
    font-size: 1rem;
    padding: 5px 10px;
    height: 35px;
    border-radius: 4px;
    border: 1px solid #bbb;
    outline: none;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border: 1px solid black;
  }
</style>
<script
  type="text/javascript"
  src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"
></script>
<script type="text/javascript">
  (function (app) {
    app.controller('Controller', [
      '$scope',
      '$http',
      function ($scope, $http) {
        $scope.config = {
          method: 'GET',
          url: '',
          data: '',
        };

        $scope.launchRequest = function () {
          var start = performance.now();
          $http($scope.config).then(
            function (response) {
              $scope.response = {
                headers: response.headers(),
                status: response.status + ' ' + response.statusText,
                data: response.data,
                time: +(performance.now() - start).toFixed(3) + 'ms',
                size:
                  +(response.headers('Content-Length') / 1024).toFixed(2) +
                  'kb',
              };
            },
            function (response) {
              $scope.response = {
                headers: response.headers(),
                status: response.status + ' ' + response.statusText,
                data: response.data,
                time: +(performance.now() - start).toFixed(3) + 'ms',
                size:
                  +(response.headers('Content-Length') / 1024).toFixed(2) +
                  'kb',
              };
            }
          );
        };
      },
    ]);
    app.filter('capitalize', function () {
      return function (token) {
        return token.charAt(0).toUpperCase() + token.slice(1);
      };
    });
  })(angular.module('App', []));
</script>

<div ng-app="App" ng-controller="Controller">
  <form ng-submit="launchRequest()">
    <select required ng-model="config.method">
      <option>GET</option>
      <option>POST</option>
    </select>
    <input
      type="text"
      placeholder="yourapihere.com"
      autofocus
      ng-model="config.url"
    />
    <input type="text" placeholder="data" ng-model="config.data" />
    <input type="submit" value="Launch Request" />
  </form>
  <ul style="list-style: none">
    <li ng-repeat="(header, value) in response.headers">
      {{header | capitalize}}: {{value}}
    </li>
  </ul>
  <span
    ng-bind="response.status + ' ' + response.time + ' ' + response.size"
  ></span>
  <pre
    ng-show="response.status === '200 OK'"
  ><code>{{response.data}}</code></pre>
</div>