<div class="container">
    <div class="row">
        <div class="col-md-8">

            <tr>
                <td><a href="#addEmployeeModal" ui-sref="createEmployee" class="btn btn-success" data-toggle="modal"><i
                        class="fa fa-user-plus"></i> <span>Add New Employee</span></a></a></td>
            </tr>
            <h4>{{emp.length}}</h4>
            <tr></tr>
            <input class="search" ng-model="keyword" type="text" placeholder="Search" ng-change="currentPage =1">
            <tr></tr>
            <h2>Thông tin nhân viên</h2>

            <table class="table">

                <thead>

                <tr>
                    <th>ID</th>
                    <th>UserName</th>
                    <th>FirstName</th>
                    <th>LastName</th>
                    <th>EmailAddress</th>
                    <th>Phone</th>
                    <th>Education</th>
                    <th>HomeTown</th>
                    <th>Department</th>
                    <th>Position</th>
                    <th colspan="2">Menu</th>
                </tr>
                </thead>
                <tbody>
                <tr class="vide"
                    ng-repeat="emp in employess | filter:{username:keyword} | lmto:3:3*(currentPage-1) track by $index">
                    <td>{{$index + 1}}</td>
                    <td>{{emp.username}}</td>
                    <td>{{emp.firstName}}</td>
                    <td>{{emp.lastName}}</td>
                    <td>{{emp.emailAddress}}</td>
                    <td>{{emp.phoneNumber}}</td>
                    <td>{{emp.education}}</td>
                    <td>{{emp.homeTown}}</td>
                    <td>{{emp.department}}</td>
                    <td>{{emp.position}}</td>
                    <td><a href="#" ng-click="updateEmp(emp);">
                        <p data-placement="top" data-toggle="tooltip" title="Edit">
                            <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal"
                                    data-target="#edit"><span class="glyphicon glyphicon-pencil"></span></button>
                        </p>
                    </a></td>
                    <td><a href="#" ng-click="deleteEmp(emp);">
                        <p data-placement="top" data-toggle="tooltip" title="Delete">
                            <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal"
                                    data-target="#delete"><span class="glyphicon glyphicon-trash"></span></button>
                        </p>
                    </a></td>
                    </td>

                </tr>


                </tbody>
            </table>


            <uib-pagination total-items="getTotalItems()" boundary-link-numbers="true" ng-model="currentPage"
                            ng-change="pageChangedIndex()" rotate="true"
                            items-per-page="employeePerPage"></uib-pagination>


        </div>
    </div>

</div>