ivmartel/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular test</title>

<style>
.sortorder:after {
content: '\25b2';
}
.sortorder.reverse:after {
content: '\25bc';
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>

</head>

<body ng-app="patientStatus">

<div ng-controller="StatusController">

  <form ng-submit="changePage()">
    <label>Page: </label>
    <input type="number" ng-model="page" placeholder="Page number">
    <input type="submit" value="Go">
  </form>

  <table class="patients">
    <tr>
      <th>
          <button ng-click="order('firstName')">First Name</button>
          <span class="sortorder" ng-show="predicate === 'firstName'" ng-class="{reverse:reverse}"></span>
      </th>
      <th>
          <button ng-click="order('lastName')">Last Name</button>
          <span class="sortorder" ng-show="predicate === 'lastName'" ng-class="{reverse:reverse}"></span>
      </th>
      <th>
          <button ng-click="order('status')">Status</button>
          <span class="sortorder" ng-show="predicate === 'status'" ng-class="{reverse:reverse}"></span>
      </th>
    </tr>
    <tr ng-repeat="patient in patients | limitTo:patPerPage:patBegin">
      <td>{{patient.firstName}}</td>
      <td>{{patient.lastName}}</td>
      <td>{{patient.status}}</td>
    </tr>
  </table>
</div>

</body>
</html>

## script.js
(function () {
  'use strict';

  var app = angular.module('patientStatus', []);

  app.controller('StatusController', ['$scope', '$http', '$filter', function ($scope, $http, $filter) {
    var orderBy = $filter('orderBy');

    $scope.order = function (predicate) {
        $scope.predicate = predicate;
        $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
        $scope.patients = orderBy($scope.patients, predicate, $scope.reverse);
    };

    // default values
    $scope.patPerPage = 6;
    $scope.patBegin = 0;
    if ( typeof $scope.page === "undefined" ) {
        $scope.page = 1;
    }

    $scope.changePage = function () {
        if ( $scope.page < 1 ) {
            $scope.page = 1;
        }
        else if ( $scope.page > $scope.pageMax ) {
            $scope.page = $scope.pageMax;
        }
        $scope.patBegin = ($scope.page - 1) * $scope.patPerPage;
    }

    // patients is an array of: { "firstName": "name 1", "lastName": "last name 1" }
    // patient_status is an array of: { "status": "good" }
    // both have the same size and have a one to one correspondence

    $http.get(
        'http://demo9314653.mockable.io/patients'
        ).then(function successCallback(response) {
            var patients = response.data;
            $http.get(
                'http://demo9314653.mockable.io/patient_status'
                ).then(function successCallback(response) {

                    for ( var i = 0; i < patients.length; ++i ) {
                        patients[i].status = response.data[i].status
                    }

                    $scope.patients = patients;
                    $scope.pageMax = Math.ceil(patients.length / $scope.patPerPage);
                    $scope.reverse = true;
                    $scope.order('firstName', true);

                }, function errorCallback(response) {
                    console.error("Error in http request to patient_status...");
            });

        }, function errorCallback(response) {
            console.error("Error in http request to patients...");
    });

  }]);

})();
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Angular test</title>

	<style>
	.sortorder:after {
	content: '\25b2';
	}
	.sortorder.reverse:after {
	content: '\25bc';
	}
	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
	<script src="script.js"></script>

	</head>

	<body ng-app="patientStatus">

	<div ng-controller="StatusController">

	<form ng-submit="changePage()">
	<label>Page: </label>
	<input type="number" ng-model="page" placeholder="Page number">
	<input type="submit" value="Go">
	</form>

	<table class="patients">
	<tr>
	<th>
	<button ng-click="order('firstName')">First Name</button>
	<span class="sortorder" ng-show="predicate === 'firstName'" ng-class="{reverse:reverse}"></span>
	</th>
	<th>
	<button ng-click="order('lastName')">Last Name</button>
	<span class="sortorder" ng-show="predicate === 'lastName'" ng-class="{reverse:reverse}"></span>
	</th>
	<th>
	<button ng-click="order('status')">Status</button>
	<span class="sortorder" ng-show="predicate === 'status'" ng-class="{reverse:reverse}"></span>
	</th>
	</tr>
	<tr ng-repeat="patient in patients \| limitTo:patPerPage:patBegin">
	<td>{{patient.firstName}}</td>
	<td>{{patient.lastName}}</td>
	<td>{{patient.status}}</td>
	</tr>
	</table>
	</div>

	</body>
	</html>
	(function () {
	'use strict';

	var app = angular.module('patientStatus', []);

	app.controller('StatusController', ['$scope', '$http', '$filter', function ($scope, $http, $filter) {
	var orderBy = $filter('orderBy');

	$scope.order = function (predicate) {
	$scope.predicate = predicate;
	$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
	$scope.patients = orderBy($scope.patients, predicate, $scope.reverse);
	};

	// default values
	$scope.patPerPage = 6;
	$scope.patBegin = 0;
	if ( typeof $scope.page === "undefined" ) {
	$scope.page = 1;
	}

	$scope.changePage = function () {
	if ( $scope.page < 1 ) {
	$scope.page = 1;
	}
	else if ( $scope.page > $scope.pageMax ) {
	$scope.page = $scope.pageMax;
	}
	$scope.patBegin = ($scope.page - 1) * $scope.patPerPage;
	}

	// patients is an array of: { "firstName": "name 1", "lastName": "last name 1" }
	// patient_status is an array of: { "status": "good" }
	// both have the same size and have a one to one correspondence

	$http.get(
	'http://demo9314653.mockable.io/patients'
	).then(function successCallback(response) {
	var patients = response.data;
	$http.get(
	'http://demo9314653.mockable.io/patient_status'
	).then(function successCallback(response) {

	for ( var i = 0; i < patients.length; ++i ) {
	patients[i].status = response.data[i].status
	}

	$scope.patients = patients;
	$scope.pageMax = Math.ceil(patients.length / $scope.patPerPage);
	$scope.reverse = true;
	$scope.order('firstName', true);

	}, function errorCallback(response) {
	console.error("Error in http request to patient_status...");
	});

	}, function errorCallback(response) {
	console.error("Error in http request to patients...");
	});

	}]);

	})();