Untitled

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">          </script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-  awesome/4.2.0/css/font-awesome.min.css">


   <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
</head>
<body>
<div class="container" ng-app="sortApp" ng-controller="mainController">

<h1>Customer List</h1>
<br/>
<form>
 <div class="form-group">
  <div class="input-group">
    <div class="input-group-addon"><i class="fa fa-search"></i></div>
    <input type="text" class="form-control" placeholder="Search a customer"  ng-model="searchPerson">
  </div>
</div>
</form>

<table class="table table-bordered table-striped">

<thead>
  <tr>
    <td>
      <a href="#" ng-click="sortType = 'id'; sortReverse = !sortReverse">
        Id
        <span ng-show="sortType == 'id' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'id' && sortReverse" class="fa fa-caret-up"></span>
      </a>
         </td><td><a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">Name                                                                                 <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'Lastname'; sortReverse = !sortReverse">
      Lastname
<span ng-show="sortType == 'Lastname' && !sortReverse" class="fa fa-caret-down"></span>
                                                                                                       <span ng-show="sortType == 'Lastname' && sortReverse" class="fa fa-caret-up">   </span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'age'; sortReverse = !sortReverse">
      Age
        <span ng-show="sortType == 'age' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'age' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
  </tr>
</thead>

<tbody>
  <tr  ng-repeat="roll in People | orderBy:sortType:sortReverse | filter:searchPerson">

    <td>{{ roll.id }}</td>
    <td>{{ roll.name }}</td>
    <td>{{ roll.Lastname }}</td>
    <td>{{ roll.age }}</td>
    <td>
         <button type="button" ng-click="removePerson($index)">Remove Person</button>
    </td>
  </tr>
</tbody>

  </table>
  <fieldset>
  <legend>Create Person</legend>
<input type="text" ng-model="name" placeholder="Name" ><br />
<input type="text" ng-model="Lastname" placeholder="Lastname" ><br />
<input type="number"ng-model="age" placeholder="age" ><br />
<button type="button" ng-click="addPerson()">Add Person</button>
</fieldset>
<!--<div ng-controller="DialogDemoCtrl">-->
<div  header-info innerHtm="inner_text"></div>
<a class="btn" data-toggle="modal" href="" ng-click="openPopupScreen()">Add   Customer
<!--</div>-->

</div>

<script type="text/javascript">

var App = angular.module('sortApp', ['ui.bootstrap'])

App.controller('mainController', function($scope, $modal, $log, $filter) {
$scope.sortType     = 'id'; // set the default sort type
$scope.sortReverse  = false;  // set the default sort order
$scope.searchPerson  = '';     // set the default search/filter term

// Array - List of People
$scope.People = [
{ id: 1, name: 'Mike', Lastname: 'White', age: 26 },
{ id: 2, name: 'Carl', Lastname: 'Barns', age: 41 },
{ id: 3, name: 'Deb', Lastname: 'McDonals',age: 78 },
{ id: 4, name: 'Tommy', Lastname: 'Humbs', age: 32 }
];

/*
This function adds a new customer
*/
$scope.addPerson = function(){
 var customer = {
     name: $scope.name,
     Lastname: $scope.Lastname,
     age: $scope.age,
 };

 $scope.People.push(customer);
 };
/*
This function removes a customer
*/
$scope.removePerson = function(index){
 $scope.People.splice(index, 1);
};
 /*
 This function adds a customer
 */
 $scope.addItem = function() {
 $scope.activeItem.id = $scope.items.length + 1;
 $scope.items.push($scope.activeItem);
 $scope.activeItem = {}; /* reset active item*/

 };
 $scope.openPopupScreen = function() {

 var modalInstance = $modal.open({
  template: '<div class="modal-header">   <a class="close" data- dismiss="modal" ng-click="cancel()">X</a><h1>Add Customer</h1></div><div class="modal-body">    <form >' +
    '  <label>Name:</label><input type="text" class="span3" ng-model="name"></br>' +
    ' <label>Lastname:</label><input type="text" class="span3" ng-model="Lastname"></br>' +
    ' <label>Age:</label><input type="number" class="span3" ng-model="age"></br>' +
    ' <button type="submit" class="btn btn-success" ng-click="addPerson()">Add In List</button>' +
    '  <button type="reset" class="btn ">Clear</button>' +
    ' </form>' +
    '</div>' +
    '<div class="modal-footer">' +
    '  <a data-dismiss="modal" aria-hidden="true" class="btn btn-primary" ng-click="cancel()">close</a>' +
    '</div>',
  controller: ModalInstanceCtrl
});

};

var ModalInstanceCtrl = function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};

$scope.cancel = function() {
 $modalInstance.dismiss('cancel');
};
};

});