ng-repeat not accurately pulling data - json

Question

Can someone point out to me what I may be doing wrong here? I have a controller pulling data from a JSON file on my server using the $http service, and passing it through an attribute to a directive. The problem is that even though I only see 4 objects in my JSON looping through it gives me 325. Further more none of the attributes are accessible to me.
My JSON
[{
"name": "Cute Shirt",
"Type": "Shirt",
"Size": "S,M,L,XL",
"Color": "R,G,B",
"SRC": "img/shirt.png"
}
,
{
"name": "Cute Shirt",
"Type": "Shirt",
"Size": "S,M,L,XL",
"Color": "R,G,B",
"SRC": "img/shirt.png"
}
,
{
"name": "Cute Shirt",
"Type": "Shirt",
"Size": "S,M,L,XL",
"Color": "R,G,B",
"SRC": "img/shirt.png"
}
,
{
"name": "Cute Shirt",
"Type": "Shirt",
"Size": "S,M,L,XL",
"Color": "R,G,B",
"SRC": "img/shirt.png"
}
]
My Controller
"use strict";
function itemControl ($http,$scope) {
$http.get('doc/products.json' ).success(function(prodata){$scope.data = prodata;});
}
My Directive
app.directive("showcase", function() {
return {
restrict: "A",
template: '{{stuff.length}}',
scope: {
stuff: "#"
}
};
});
And Finally the HTML
<div ng-controller="itemControl">
<div showcase stuff="{{data}}"></div>
</div>

Answer 1

From the AngularJS documentation:
# or #attr - bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings.
Using the = will help
= or =attr - set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute.
You will want to change your <div showcase stuff="{{data}}"></div> to <div showcase stuff="data"></div>

Answer 2

Change # to =
# means it will interpolate the object to string.