<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <p>Click the table headers to change the sorting order:</p>

  <div ng-app="myApp" ng-controller="namesCtrl">
    <p>
      <button type="button" ng-click="remove($index)">Delete Selected</button>
    </p>

    <table border="1" width="100%">
      <tr>
        <th>
          <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" ng-checked="allChecked()" />
        </th>
        <th></th>
        <th>Sl no</th>
        <th ng-click="orderByMe('name')">Name</th>
        <th ng-click="orderByMe('country')">Country</th>
        <th>Delete</th>
      </tr>
      <tr ng-repeat="x in names | orderBy:myOrderBy">
        <td>
          <input type="checkbox" ng-model="x.select"  />
        </td>
        <td>{{x.select}}</td>
        <td>{{$index+1}}</td>
        <td>{{x.name}}</td>
        <td>{{x.country}}</td>
        <td>
          <button type="button" ng-click="Delete(x)">Delete</button>
        </td>
      </tr>
    </table>

  </div>

  <script>
    angular.module('myApp', []).controller('namesCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) {
      $scope.names = [{
        name: 'Jani',
        country: 'Norway'
      }, {
        name: 'Carl',
        country: 'Sweden'
      }, {
        name: 'Margareth',
        country: 'England'
      }, {
        name: 'Hege',
        country: 'Norway'
      }, {
        name: 'Joe',
        country: 'Denmark'
      }, {
        name: 'Gustav',
        country: 'Sweden'
      }, {
        name: 'Birgit',
        country: 'Denmark'
      }, {
        name: 'Mary',
        country: 'England'
      }, {
        name: 'Kai',
        country: 'Norway'
      }];

      //for sorting the rows    
      $scope.orderByMe = function(x) {
          $scope.myOrderBy = x;
        }
        //single row deletion
      $scope.Delete = function(x) {
        $scope.names.splice($scope.names.indexOf(x), 1);
      };
      
      $scope.allChecked = function() {
        return $scope.names.filter(obj => obj.select).length === $scope.names.length
      }
      //selecting all checkboxes in the table
      $scope.checkAll = function() {
        angular.forEach($scope.names, function(x) {
          x.select = $scope.selectAll;
        });
      };
      
      $scope.allChecked = function() {
        return $scope.names.filter(obj => obj.select).length === $scope.names.length
      }
      //for selecting and deleting checked items
    $scope.remove = function(){
      $scope.names = filterFilter($scope.names, function (x) {
        return !x.select;
      });
    };

    }]);
  </script>

</body>

</html>
// Code goes here

/* Styles go here */