JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="controller">
  <input type="text" data-ng-model="parameter" placeholder="search">
  <p/>
  <table border="1">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        </tr> 
    <thead>
    <tbody>
      <tr data-ng-repeat="user in (filteredList = (users | filter: parameter))">
        <td>{{$index+1}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
      </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total ages</td>
      <td>{{filteredList | sumByKey: 'age'  }}</td>
    </tr>
  </tfoot>
  </table>
</div>

JavaScript

var app = angular.module("app", []);
app.controller("controller", function($scope){
	$scope.users = [
  	{name: "Mike", age: 23},
    {name: "Pamela", age: 26},
    {name: "Peter", age: 27},
    {name: "Marie", age: 25},
    {name: "David", age: 26},
    {name: "Dorothy", age: 21},
    {name: "Dwight", age: 29},
    {name: "Micheal", age: 22},
  ]
});

app.filter('sumByKey', function() {
	return function(data, key) {
		if (typeof(data) === 'undefined' || typeof(key) === 'undefined') {
			return 0;
    }
 
    var sum = 0;
    for (var i = data.length - 1; i >= 0; i--) {
      sum += parseInt(data[i][key]);
    }
    return sum;
	};
});