Edit in JSFiddle

function ShoppingCartCtrl($scope)  {
    
        $scope.items = [
			{Name: "Soap", Price: "25", Quantity: "10"},
			{Name: "Shaving cream", Price: "50", Quantity: "15"},
			{Name: "Shampoo", Price: "100", Quantity: "5"}
		];
			
		$scope.mySortFunction = function(item) {
			if(isNaN(item[$scope.sortExpression]))
				return item[$scope.sortExpression];
			return parseInt(item[$scope.sortExpression]);
		}
}
<div ng-app>
    <span class="bold">Demonstrating filtering and sorting using Angular JS</span>
    <br /><br />
        <div ng-controller="ShoppingCartCtrl">        
            <div>Sort by: 
            <select ng-model="sortExpression">
					<option value="Name">Name</option>
					<option value="Price">Price</option>
					<option value="Quantity">Quantity</option>
				</select>
            </div>
			<br />
			<div><strong>Filter Results</strong></div>
			<table>
				<tr>
					<td>By Any: </td>
					<td><input type="text" ng-model="search.$" /></td>
				</tr>
				<tr>
					<td>By Name: </td>
					<td><input type="text" ng-model="search.Name" /></td>
				</tr>
				<tr>
					<td>By Price: </td>
					<td><input type="text" ng-model="search.Price" /></td>
				</tr>
				<tr>
					<td>By Quantity: </td>
					<td><input type="text" ng-model="search.Quantity" /></td>
				</tr>
			</table>
            <br />
            <table border="1">
				<thead>
					<tr>
						<th>Name</th>
						<th>Price</th>
						<th>Quantity</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in items | orderBy:mySortFunction | filter:search">
						<td>{{item.Name}}</td>
						<td>{{item.Price | currency}}</td>
						<td>{{item.Quantity}}</td>
					</tr>
				</tbody>
			</table>
			<br />
</div>
</div>
.bold { font-weight:bold; }

table td{
    padding: 10px;
}

table th{
    font-weight: bold;
    text-align: center;
}

External resources loaded into this fiddle: