Untitled

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="script.js"></script>
  </head>

<body ng-controller="myController">
	<h1>Filter Table</h1>
	<label ng-repeat="option in structure.tabs">
		<input type="checkbox" ng-model="option.selected">{{option.index}}
	</label>
	<table border="1" width="100%">
		<tr>
			<th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
		</tr>
		<tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
		    <td ng-show="structure.tabs[0].selected">{{data.name}}</td>
		    <td ng-show="structure.tabs[1].selected">{{data.age}}</td>
		    <td ng-show="structure.tabs[2].selected">{{data.city}}</td>
		    <td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
		</tr>
	</table>
  <h1>Unique Values Table (per key)</h1>
	<table border="1" width="100%" style="margin-top: 50px;">
		<tr>
			<th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
		</tr>
		<tr>
			<td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
				<table border='1'>
					<tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
						<td>
							<input type="checkbox">{{dv[hv.filter]}}
						</td>
					</tr>
				</table>
				<br>
				<button ng-click="getChecked(hv.filter)">Get Checked</button>
			</td>
		</tr>
	</table>
</body>

</html>

var app = angular.module('myApp', []);
app.controller("myController", function ($scope,$log) {

	$scope.sortColumn="name";
	$scope.reverseSort=false;

	$scope.sortData=function(column) {
		$scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
		$scope.sortColumn=column;
	}
    
	$scope.structure={
		"tabs": [
			{
				"index": "Name",
				"filter": "name",
				"selected": true
			},
			{
				"index": "Age",
				"filter": "age",
				"selected": true
			},
			{
				"index": "City",
				"filter": "city",
				"selected": true
			},
			{
				"index": "Designation",
				"filter": "designation",
				"selected": true
			}
		],
		"info": [
			{
				"name": "Abar",
				"age": "27",
				"city": "Ghaziabad",
				"designation": "Php Developer"
			},
			{
				"name": "Abar",
				"age": "27",
				"city": "Okhla",
				"designation": "Html Developer"
			},
			{
				"name": "Nishant",
				"age": "25",
				"city": "Delhi",
				"designation": "Angular Developer"
			},
			{
				"name": "Amit",
				"age": "30",
				"city": "Noida",
				"designation": "Android Developer"
			}
		]
	};

	$scope.getChecked = function(tab) {
		alert("Need to get all checked value of key: "+tab);
	}
});

app.filter('unique', function() {
	return function (arr, field) {
		var o = {}, i, l = arr.length, r = [];
		for(i=0; i<l;i+=1) {
			o[arr[i][field]] = arr[i];
		}
		for(i in o) {
			r.push(o[i]);
		}
		return r;
	};
});

/* Styles go here */