JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
    <div data-ng-controller="campaignIndexCtrl">
        <input type="text" ng-model="q" placeholder="Search..." class="form-control">
            
        <div>
            TOTAL COMMISSION 
            <span>{{ filteredCampaigns | campaignTotal: 'totalCommission' }}</span>
        </div>
            
        <table>
            <tr ng-repeat="campaign in filteredCampaigns=(campaigns | filter:{'name':q})">
                <td>{{campaign.name}}</td>
                <td>{{campaign.totalCommission}}</td>
            </tr>
        </table>
    </div>
</div>

JavaScript

angular.module('app.campaign', []);

angular.module('app', ['app.campaign']);

angular.module('app.campaign')
    .controller('campaignIndexCtrl', ['$scope','$filter', campaignIndexCtrl])
    .filter('campaignTotal', campaignTotal);

function campaignTotal() {
    return function (data, key) {
        console.log(data); // i get undefined when using {{ filteredCampaigns | campaignTotal: 'totalCommission' }}
        if (typeof (data) === 'undefined' || typeof (key) === 'undefined') {
            return 0;
        }
        var sum = 0;
        for (var i = 0; i < data.length; i++) {
            sum = sum + data[i][key];
        }
        return sum;
    }
}

function campaignIndexCtrl($scope,$filter) {
    $scope.campaigns = [
        {
            idCampaign: 1,
            name: "Test3",
            totalCommission: 0
        },
        {
            idCampaign: 2,
            name: "Ms. Hanna Dietrich Sr.",
            totalCommission: 1467.189052
        },
        {
            idCampaign: 3,
            name: "Ms. Hanna Dietrich Jr.",
            totalCommission: 1288.360845
        }
    ];
}