reemplazable/demo14.html

## demo14.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <!--[if lt IE 9]>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <![endif]-->
        <script src="js/angular.min.js"></script>
        <script src="../ng-table.js"></script>
        <link rel="stylesheet" href="../ng-table.css">
    </head>
<body ng-app="main">

<h1>Table with external control of data</h1>

<div ng-controller="DemoCtrl">
        <table ng-table="tableParams" class="table">
            <tr ng-repeat="user in $data">
                <td data-title="'Name'" sortable="'name'">
                    {{user.name}}
                </td>
                <td data-title="'Age'" sortable="'age'">
                    {{user.age}}
                </td>
            </tr>
        </table>

        <script>
var Service = function ($q) {
	var data1 = [{name: "One", age: 50},
	            {name: "Two", age: 43},
	            {name: "Three", age: 27},
	            {name: "Four", age: 29},
	            {name: "Five", age: 34},
	            {name: "Six", age: 43},
	            {name: "Seven", age: 27},
	            {name: "Eight", age: 29},
	            {name: "Nine", age: 34},
	            {name: "Ten", age: 43},
	            {name: "Eleven", age: 27},
	            {name: "Twelve", age: 29},
	            {name: "Thirteen", age: 34},
	            {name: "Fourteen", age: 43},
	            {name: "Fifteen", age: 27},
	            {name: "Sixteen", age: 29}];
	this.getData = function(asyncPromise) {
		var deferred = $q.defer();
		var promise = deferred.promise;
		promise.then(asyncPromise);
		deferred.resolve(data1);
	}
};
        var app = angular.module('main', ['ngTable']).
        controller('DemoCtrl', function($scope, $filter, ngTableParams, service) {
			$scope.data = [];
			var getData = function() {
				return $scope.data;
			};
			$scope.$watch("data", function () {
				$scope.tableParams.reload();
			});
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10,          // count per page
                sorting: {
                    name: 'asc'     // initial sorting
                }
            }, {
                total: function () { return getData().length; }, // length of data
                getData: function($defer, params) {
                    var filteredData = getData();
                    var orderedData = params.sorting() ?
                                        $filter('orderBy')(filteredData, params.orderBy()) :
                                        filteredData;

                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                },
				$scope: { $data: {} }
            });
		    service.getData(function (data) {
		    	$scope.data = data;
			});
        });
		app.service( {'service': Service}, []);
        </script>

</div>


    </body>
</html>
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<!--[if lt IE 9]>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<![endif]-->
	<script src="js/angular.min.js"></script>
	<script src="../ng-table.js"></script>
	<link rel="stylesheet" href="../ng-table.css">
	</head>
	<body ng-app="main">

	<h1>Table with external control of data</h1>

	<div ng-controller="DemoCtrl">
	<table ng-table="tableParams" class="table">
	<tr ng-repeat="user in $data">
	<td data-title="'Name'" sortable="'name'">
	{{user.name}}
	</td>
	<td data-title="'Age'" sortable="'age'">
	{{user.age}}
	</td>
	</tr>
	</table>

	<script>
	var Service = function ($q) {
	var data1 = [{name: "One", age: 50},
	{name: "Two", age: 43},
	{name: "Three", age: 27},
	{name: "Four", age: 29},
	{name: "Five", age: 34},
	{name: "Six", age: 43},
	{name: "Seven", age: 27},
	{name: "Eight", age: 29},
	{name: "Nine", age: 34},
	{name: "Ten", age: 43},
	{name: "Eleven", age: 27},
	{name: "Twelve", age: 29},
	{name: "Thirteen", age: 34},
	{name: "Fourteen", age: 43},
	{name: "Fifteen", age: 27},
	{name: "Sixteen", age: 29}];
	this.getData = function(asyncPromise) {
	var deferred = $q.defer();
	var promise = deferred.promise;
	promise.then(asyncPromise);
	deferred.resolve(data1);
	}
	};
	var app = angular.module('main', ['ngTable']).
	controller('DemoCtrl', function($scope, $filter, ngTableParams, service) {
	$scope.data = [];
	var getData = function() {
	return $scope.data;
	};
	$scope.$watch("data", function () {
	$scope.tableParams.reload();
	});
	$scope.tableParams = new ngTableParams({
	page: 1, // show first page
	count: 10, // count per page
	sorting: {
	name: 'asc' // initial sorting
	}
	}, {
	total: function () { return getData().length; }, // length of data
	getData: function($defer, params) {
	var filteredData = getData();
	var orderedData = params.sorting() ?
	$filter('orderBy')(filteredData, params.orderBy()) :
	filteredData;

	$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
	},
	$scope: { $data: {} }
	});
	service.getData(function (data) {
	$scope.data = data;
	});
	});
	app.service( {'service': Service}, []);
	</script>

	</div>


	</body>
	</html>