ng-repeat not accurately pulling data

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>