Angular - Ng-Table

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.ngtable/0.3.2/ng-table.css">
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.2/ng-table.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<form>
    <div class="error">
      
    </div>
    <div ng-app="main" ng-controller="DemoCtrl">
        <p>
            <table id="grid" ng-table="tableParams" show-filter="true" class="table">
                <tr ng-repeat="user in $data" ng-click="user.$selected = true; changeSelection(user)" ng-class="{'active': user.$selected}" ng-form name="urlForm">
                    <td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }"> <span ng-show='!user.$edit'>{{user.name}}</span>
 <span ng-show='user.$edit'><input type=text ng-model="temp.name" ng-required="true" /></span>

                    </td>
                    <td data-title="'Surname'" sortable="'surname'" filter="{ 'surname': 'text' }"> <span ng-show='!user.$edit'>{{user.surname}}</span>
 <span ng-show='user.$edit'><input type=text ng-model="temp.surname" /></span>

                    </td>
                    <td data-title="'Date of birth'" sortable="'dob'" filter="{ 'dob': 'text' }"> <span ng-show='!user.$edit'>{{user.dob | date:'yyyy/MM/dd'}}</span>
 <span ng-show='user.$edit'><input  required  placeholder="yyyy/MM/dd" type="text" ng-model="temp.dob" /></span>

                    </td>
                    <td data-title="'Email'" sortable="'email'" filter="{ 'email': 'text' }"> <span ng-show='!user.$edit'>{{user.email}}</span>
 <span ng-show='user.$edit'><input type=text ng-required="true" ng-model="temp.email" /></span>

                        <td data-title="'Action'"...

CSS

body {
    padding: 10px !important;
}
input.ng-invalid.ng-dirty {
    background-color: #FA787E;
}
input.ng-valid.ng-dirty {
    background-color: #78FA89;
}
#grid tr.active {
    color: blue;
}
input[type=text] {
    border: 1px blue solid;
    margin: 0;
    width: 100%;
    padding: 0;
}
#grid td {
    align: center;
    text-align: center;
}
thead tr:nth-child(2) {
    background-color: gray;
    ;
    padding: 0;
    margin: 0;
    border: 0;
}
thead tr:nth-child(2) th {
    background-color: gray;
    ;
    padding: 0;
    margin: 0;
    border: 0;
}
thead tr:nth-child(2) th input {
    padding: 0;
    margin: 0;
    border: 1px solid gray;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
tbody tr:nth-child(even) {
    background-color: rgba(0, 255, 0, 0.073);
}
table {
    border: 1px solid gray;
}

JavaScript

if(!window.console) window.console = {};
if(!window.console.log) window.console.log = function(){};

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


app.controller('DemoCtrl', function ($scope, $filter, ngTableParams, $timeout) {

    $scope.temp = {};

    var data = [];

    for (i = 0; i < 200; i++) {
        data.push({
            name: "John" + i,
            surname: "Doe95" + i,
            dob: new Date(1901, 12, 12),
            email: "[email protected]"
        });
    }


    $scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10, // count per page
        sorting: {
            name: 'asc' // initial sorting
        },
        filter: {
            name: '' // initial filter
        }
    }, {
        total: data.length, // length of data
        getData: function ($defer, params) {
           

            // use build-in angular filter
            var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;

            //orderedData = $filter('filter')(orderedData, params.filter()) : orderedData;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
})