JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="myCtrl">
    <form style="margin : 0 1%">
					<div class="form-group">
						<div class="input-group">
						<div class="input-group-addon"><i class="fa fa-search"></i></div>

							<input type="text" class="form-control" placeholder="Rechercher un nom" ng-model="Noms">

						</div>      
						</div>
					</form>
    <table cellspacing="0" cellpadding="0" class="tab_op_list_main table table-bordered table-striped" style="width : 98%; border : 1px solid #000">
        <thead>
            <tr align="left">
                <td>	<a href="" ng-click="sortType = 'Noms'; sortReverse = !sortReverse">
								        Noms & prenoms
								        <span ng-show="sortType == 'Noms' && !sortReverse" class="fa fa-caret-down"></span>
								        <span ng-show="sortType == 'Noms' && sortReverse" class="fa fa-caret-up"></span>
								    </a>

                </td>
                <td style="width : 7%; text-align: right">	<a href="" ng-click="sortType = 'Juin'; sortReverse = !sortReverse">
										Juin
										<span ng-show="sortType == 'Juin' && !sortReverse" class="fa fa-caret-down"></span>
								        <span ng-show="sortType == 'Juin' && sortReverse" class="fa fa-caret-up"></span>
								    </a>

                </td>
                <td style="width : 7%; text-align: right">	<a href="" ng-click="sortType = 'Juillet'; sortReverse = !sortReverse">
										Juil
										<span ng-show="sortType == 'Juillet' && !sortReverse" class="fa fa-caret-down"></span>
								        <span ng-show="sortType == 'Juillet' && sortReverse" class="fa fa-caret-up"></span>
								    </a>

                </td>
                <td style="width : 7%; text-align: right">	<a href="" ng-click="sortType = 'Aout'; sortReverse = !sortReverse">
										Aout
										<span ng-show="sortType == 'Aout' && !sortReverse" class="fa fa-caret-down"></span>
								        <span ng-show="sortType == 'Aout' && sortReverse" class="fa...

JavaScript

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

app.controller("myCtrl", function ($scope) {
    $scope.sortType = 'Noms'; // set the default sort type
    $scope.sortReverse = false; // set the default sort order
    $scope.Noms = ''; // set the default search/filter term

    // create the list of contacts
    $scope.Annuaire = [{
        Id: '14200',
        Noms: 'YONGUI MASSOK Jean Paul',
        Juin: 0.00,
        Juillet: 0.00,
        Aout: 172.00,
        Septembre: 0.00
    }, {
        Id: '13216',
        Noms: 'YUCEL Asli',
        Juin: 0.00,
        Juillet: 0.00,
        Aout: 4971.00,
        Septembre: 0.00
    }, {
        Id: '941',
        Noms: 'YUCEL Ozhan',
        Juin: 0.00,
        Juillet: 0.00,
        Aout: 43.00,
        Septembre: 0.00
    }, {
        Id: '9123',
        Noms: 'ZOBOU Daniel',
        Juin: 1096.00,
        Juillet: 3745.00,
        Aout: 4494.00,
        Septembre: 2189.00
    }

    ];
    $scope.getTotal = function (type) {
        var total = 0;
        angular.forEach($scope.Annuaire, function (el) {
            total += el[type];
        });
        return total;
    };
    $scope.sum = function (roll) {
        return roll.Juin + roll.Juillet + roll.Aout + roll.Septembre;
    }

});