JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total = 0">
  <input type="text" ng-model="searchFilter" />
  <ul ng-repeat="x in resultValue=(myarr | filter:{'id':searchFilter})">
    <li>{{x.val}}</li>
    <li ng-if="$last">total {{ resultValue.reduce(getSum,0); }}</li>
  </ul>
</div>

JavaScript

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.myarr = [{
    id: 1,
    val: 500
  }, {
    id: 2,
    val: 300
  }, {
    id: 3,
    val: 200
  }, {
    id: 4,
    val: 600
  }, {
    id: 5,
    val: 100
  }];
  $scope.getSum = function(a, b) {
    return (a.val ? a.val : a) + b.val;
  }
});