Angular: Empty Fiddle

http://angularjs.org/

by Zukzuk

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div ng-controller="MyCtrl">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
                <th ng-click="predicate = 'name'; reverse=!reverse">Name(click me to order)></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="name in (names | orderBy:predicate:reverse | orderEmpty:'name':'toBottom')">
              <td>{{name.name}}</td>
              <td>{{name.description}}</td>
            </tr>
          </tbody>
        </table>
</div>

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.filter('orderEmpty', function () {
		return function (array, key, type) {
			var present, empty, result;

			if(!angular.isArray(array)) return;

			present = array.filter(function (item) {
				return item[key];
			});

			empty = array.filter(function (item) {
				return !item[key]
			});

			switch(type) {
				case 'toBottom':
					result = present.concat(empty);
					break;
				case 'toTop':
					result = empty.concat(present);
					break;
                    
                    // ... etc, etc ...
                    
				default:
					result = array;
					break;
			}
			return result;
		};
	});
function MyCtrl($scope) {
    $scope.names = [{"name":"Name 1","description":"lorem ipsum"},{"name":"Name 2","description":"lorem ipsum"},{"name":"","description":"lorem ipsum"}];
}