title: Angular customer directive with filter and sort
body: <p>I need to sort the json object with one of the userType thru ng-repeat. Now i was able to retrieve and display the data, and ISSUE is that I need to sort and display two different table the below list; One is for MARRIED and another for SINGLE.</p>
  
  <p>How can i sort married/single when i use ng-repeat, and need to show in TWO tables. Any suggestions/help will be appreciated....</p>
  
  <pre><code>.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: `&lt;div class="table-responsive"&gt;
        &lt;table class="table"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Relation&lt;/th&gt;
                    &lt;th&gt;Percentage&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr data-ng-repeat="user in users"&gt;
                    &lt;td&gt;{{user.personalInfo.firstName}} {{user.personalInfo.lastName}}&lt;/td&gt;
                    &lt;td&gt;{{user.userRelations.relationshipType}}&lt;/td&gt;
                    &lt;td&gt;&lt;span ng-if="!isEdit"&gt;{{user.personalInfo.percent}}&lt;/span&gt;&lt;input type="text"
                            ng-if="isEdit" ng-model="user.personalInfo.percent" class="form-control"&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;a ng-click="showEdit()" href="#"&gt;Update&lt;/a&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
            &lt;tfoot&gt;
                &lt;tr&gt;
                    &lt;td colspan="2"&gt;Total Percentage&lt;/td&gt;
                    &lt;td&gt;100%&lt;/td&gt;
                    &lt;td&gt;&lt;a ng-if="!isEdit" ng-click="showEdit()" href="#"&gt;Update&lt;/a&gt;&lt;a ng-if="isEdit" ng-click="showEdit()" href="#"&gt;Save Percentage&lt;/a&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tfoot&gt;
        &lt;/table&gt;
    &lt;/div&gt;`
        };
      })
  
      &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-9"&gt;
              &lt;h1&gt;Update User Information&lt;/h1&gt;
              &lt;div data-ng-controller="user"&gt;
                  &lt;div data-ng-controller="userInfo"&gt;
                      &lt;user-details user="users"&gt;&lt;/user-details&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>