Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">

 <div class="stock">
 
 <div ng-repeat="basket in basketList">
  <div>Basket : {{basket.name}}</div>
  <span ng-bind="getCtg(basket)"></span>,
  <span ng-bind="getTotal(basket)"></span>  
 </div>
</div>
</div>

JavaScript

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

myApp.controller('MyCtrl',function ($scope) {
    $scope.basketList = [{id : "A1", name : "metal"},
{id : "A2", name : "plastic"},
{id : "B1", name : "fiber"}];

$scope.itemList = [{ id : 1, basket_id : 'A1', ctg : 'fruit', stock : 3},
{ id : 2, basket_id : 'A2', ctg : 'fruit', stock : 2},
{ id : 4, basket_id : 'A1', ctg : 'fruit', stock : 4},
{ id : 5, basket_id : 'B1', ctg : 'fruit', stock : 1},
{ id : 6, basket_id : 'B1', ctg : 'fruit', stock : 2},
{ id : 7, basket_id : 'A1', ctg : 'fruit', stock : 4},
{ id : 8, basket_id : 'A2', ctg : 'fruit', stock : 2}];

$scope.getTotal = function(basket) {
var totalStock = $scope.itemList.reduce(function(total, curr){
	if (curr.basket_id === basket.id) return total + curr.stock;
  return total;
}, 0);
return totalStock;
}

$scope.getCtg = function(basket) {
for (var i = 0; i < $scope.itemList.length; i++) {
	if (basket.id === $scope.itemList[i].basket_id) return $scope.itemList[i].ctg;
}
return 'not found';
}

})