AngularJS: Simple Custom Filter

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular-resource.js"></script>
<div data-ng-controller="ClientCtrl">
    <ul class="inline">
        <li>
            <div class="alert alert-info">
                 <h4>Total Filtered Client: {{filtered.length}}</h4>

            </div>
        </li>
        <li>
            <div class="btn-group" data-ng-class="{open: open}">
                <button class="btn">Filter by Company</button>
                <button class="btn dropdown-toggle" data-ng-click="open=!open"><span class="caret"></span>

                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
                    <li><a data-ng-click="checkAll()"><i class="icon-ok-sign"></i>  Check All</a>

                    </li>
                   

                    </li>
                    <li class="divider"></li>
                    <li data-ng-repeat="company in companyList"> <a data-ng-click="setSelectedClient()">{{company.name}}<span data-ng-class="isChecked(company.name)"></span></a>

                    </li>
                </ul>
            </div>
        </li>
    </ul>
    <hr/>
     <h3>Size Table:</h3>

    <table class="table table-hover table-striped">
        <thead>
            <tr>
                
                <th style="width:20%">Company</th>
                <th style="width:40%">Designation</th>
                <th style="width:30%">Name</th>
                
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="client in filtered = (clients | companyFilter:selectedCompany)">
                
                <td><a href= "#!/clients/name=...

JavaScript

'use strict';
var App = angular.module('clientApp', ['ngResource', 'App.filters']);
App.controller('ClientCtrl', ['$scope', function ($scope) {
    $scope.selectedCompany = [];
    $scope.companyList = [{
        
        name: 'A'
    }, {
        
        name: 'B'
    }, {
        
        name: 'C'
    }];

    $scope.clients = [{
        name: 'Gray',
       
        designation: 'Manager',
        company: {
            
            name: 'A'
        }
    }, {
        name: 'White',
        designation: 'M',
        company: {
            
            name: 'A'
        }
    },{
        name: 'White',
        designation: 'M',
        company: {
            
            name: 'B'
        }
    },{
        name: 'White',
        designation: 'Senior',
        company: {
            
            name: 'B'
        }
    },{
        name: 'White',
        designation: 'Junior',
        company: {
            
            name: 'C'
        }
    }, {
        name: 'White',
        designation: 'M',
        company: {
            
            name: 'A'
        }
    },];

    $scope.setSelectedClient = function () {
        var name = this.company.name;
        if (_.contains($scope.selectedCompany, name)) {
            $scope.selectedCompany = _.without($scope.selectedCompany, name);
        } else {
            $scope.selectedCompany.push(name);
        }
        return false;
    };

    $scope.isChecked = function (name) {
        if (_.contains($scope.selectedCompany, name)) {
            return 'icon-ok pull-right';
        }
        return false;
    };

    $scope.checkAll = function () {
        $scope.selectedCompany = _.pluck($scope.companyList, 'name');
    };
}]);

angular.module('App.filters', []).filter('companyFilter', [function () {
    return function (clients, selectedCompany) {
        if (!angular.isUndefined(clients) && !angular.isUndefined(selectedCompany) && selectedCompany.length > 0) {
            var tempClients = [];
           ...