var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  //currentEmployeeData.RecordsOfJSONS
  $scope.mydata = [
    {name: 'foo', startDate: '2016-01-01', endDate: '2016-01-31', status:'created' },
    {name: 'bar', startDate: '2016-01-01', endDate: '2016-01-31', status:'pending' },
    {name: 'baz', startDate: '2016-01-01', endDate: '2016-01-31', status:'created' },
    {name: 'qux', startDate: '2016-01-01', endDate: '2016-01-31', status:'created' }]
  
}).directive("csHolidayTable", [function () {
        return {
            restrict: "E",
            scope: {
                records: "=",
                filterconditions: "=",
                checkboxcondition: "="
            },

            template:'<table class="cs-table-01">' +
            '<thead> <tr>' +
            '<th>Employee</th>' +
            '<th>Start date</th>' +
            '<th>End date</th>' +
            '<th>Status</th>' +
            '<th>Select</th>' +
            ' </tr> </thead> ' +
            '<tbody> <tr ng-repeat="oneRecord in records | filter : filterconditions">' +
            '<td>{{oneRecord.name}}</td> ' +
            '<td>{{oneRecord.startDate}}</td> ' +
            '<td>{{oneRecord.endDate}}</td>' +
            '<td>{{oneRecord.status}}</td> '+
            '</tr></tbody></table>',
        };
    }]);
<!DOCTYPE html>
<html ng-app="plunker">

  <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.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{ name }}!</p>
    <cs-holiday-table records="mydata" checkboxcondition = "'pending'" filterconditions="{ 'status': 'pending' }"></cs-holiday-table>
  </body>

</html>
/* Put your css in here */