问带有筛选和排序的Angular customer指令

EN

.controller('userInfo', ['$scope', 'userService', function ($scope, userService) {
      userService.getuserList().then(function (users) {
        users = {
                "personalInfo": {
                    "firstName": "Richardoo",
                    "lastName": "Gil",
                    "maritalStatus": "Married",                    
                    "percentage": "50"
        },"personalInfo": {
                    "firstName": "Richardoo",
                    "lastName": "Gil",
                    "maritalStatus": "Single",                    
                    "percentage": "50"
        },
        "personalInfo": {
                    "firstName": "Richardoo",
                    "lastName": "Gil",
                    "maritalStatus": "Married",                    
                    "percentage": "50"
        }}

        $scope.users = users;
      });
    }])

.directive('userDetails', function () {
      return {
        restrict: 'E',
        scope: {
          users: '='
        },
        controller: function ($scope) {
          $scope.showEdit = function () {
            $scope.isEdit = true;
          }
        },
        template: `<div class="table-responsive">
      <table class="table">
          <thead>
              <tr>
                  <th>Name</th>
                  <th>Relation</th>
                  <th>Percentage</th>
                  <th></th>
              </tr>
          </thead>
          <tbody>
              <tr data-ng-repeat="user in users">
                  <td>{{user.personalInfo.firstName}} {{user.personalInfo.lastName}}</td>
                  <td>{{user.userRelations.relationshipType}}</td>
                  <td><span ng-if="!isEdit">{{user.personalInfo.percent}}</span><input type="text"
                          ng-if="isEdit" ng-model="user.personalInfo.percent" class="form-control"></td>
                  <td><a ng-click="showEdit()" href="#">Update</a></td>
              </tr>
          </tbody>
          <tfoot>
              <tr>
                  <td colspan="2">Total Percentage</td>
                  <td>100%</td>
                  <td><a ng-if="!isEdit" ng-click="showEdit()" href="#">Update</a><a ng-if="isEdit" ng-click="showEdit()" href="#">Save Percentage</a></td>
              </tr>
          </tfoot>
      </table>
  </div>`
      };
    })

    <div class="container">
    <div class="row">
        <div class="col-md-9">
            <h1>Update User Information</h1>
            <div data-ng-controller="user">
                <div data-ng-controller="userInfo">
                    <user-details user="users"></user-details>
                </div>
            </div>
        </div>
    </div>
</div>