How to pass a object into a directive - angularjs

Question

I have a items array which is used by ng-repeat to render the menu,
and on click of Add to cart button addItem() is called.
Currently i pass the name of the selected item as the name attribute in item-container directive.
How shall i pass an entire object through the attribute to the directive
HTML snippet
<p ng-repeat = "item in items">
<item-container
startcounter = 1
resetter = 'reset'
item = 'item'
name = {{item.name}} >
{{item.name}}
</item-container><br><br>
</p>
JS snippet
.directive('itemCounter',function(){
return {
controller: function() {return {}},
restrict:'E',
scope:{
item:"=",
resetter:"="
},
transclude:true,
link:function(scope,elem,attr){
scope.qty = attr.startcounter
scope.add = function(){
scope.qty++;
}
scope.remove = function(){
scope.qty--;
}
scope.addItem = function(){
console.log(attr.item);
scope.$parent.addMsg(scope.qty,attr.name)
console.log("value when submitted:" + scope.qty + "name:"+ attr.name);
scope.qty = attr.startcounter;
scope.$parent.resettrigger();
}
scope.$watch(function(attr){
return attr.resetter
},
function(newValue){
if(newValue === true){
scope.qty = attr.startcounter;
}
});
},
template:"<button ng-click='addItem();'>Add to cart</button>&nbsp&nbsp"+
"<button ng-click='remove();' >-</button>&nbsp"+
"{{qty}}&nbsp" +
"<button ng-click='add();'>+</button>&nbsp&nbsp"+
"<a ng-transclude> </a>"
}

Answer 1

Currently you actually aren't even passing in the name it seems. All the passing in magic happens in this part:
scope:{
resetter:"="
},
As you can see, there is no mention of name. What you need to do is add a field for item and just pass that in:
scope:{
resetter:"=",
item: "="
},
Then you can just do
<p ng-repeat = "item in items">
<item-container
startcounter = 1
resetter = 'reset'
item = item >
{{item.name}}
</item-container><br><br>
</p>
Also I'm fairly sure you dont want to be using transclude here. Look into templateUrl