Angular ng-repeat issue - angularjs

Question

I've this controller:
app.controller('HomeController', function($scope) {
$scope.buttonList = [
{
href: "http://ciao.html",
cssClass: "",
iconBeforeCssClass: "",
labelCssClass: "",
labelText: "ciao",
iconAfterCssClass: "",
},
{
href: "ciao2.html",
cssClass: "",
iconBeforeCssClass: "",
labelCssClass: "",
labelText: "ciao2",
iconAfterCssClass: "",
}
];
});
This directive:
app.directive('widgetButtonList', function() {
var directive = {};
directive.restrict = 'E';
directive.replace = false;
directive.templateUrl = 'modules/directives/widget-button-list.html';
directive.scope = {
additionalCssClass: "#",
buttons : "#",
};
return directive; });
The template is the follow:
<div class="ap-block ap-button-list-block {{additionalCssClass}}">
<ul>
<li ng-repeat="btn in buttons track by $index">
<a href="{{btn.href}}" class="{{btn.cssClass}}">
<i class="ap-button-list-before-icon {{btn.iconBeforeCssClass}}" ></i>
<span class="ap-button-list-label {{btn.labelCssClass}}">{{btn.labelText}}</span>
<i class="ap-button-list-after-icon {{btn.iconAfterCssClass}}" ></i>
</a>
</li>
</ul>
And the view is like this:
<div ng-controller="HomeController">
<widget-button-list buttons="{{buttonList}}"></widget-button-list>
But otherwise to render two times the template button as i expected, it print 250 time the widget's template without binding nothing. Can someone help me??

Answer 1

You'll want to pass the buttonsList using a different isolate scope attribute instead of using text-binding. The # symbol on the directive definition object indicates you'll be passing in a string, where you're actually passing in an array of objects. Try this:
directive.scope = {
additionalCssClass: "#",
buttons : "=" //instead of #
};
<widget-button-list buttons="buttonList"></widget-button-list>
Plunker Demonstration
And just for the sake of completeness, you could pass in the buttonsList as a string, but you'll have to be aware that in the directive you'll be recieving a JSON string. Then you'll need to parse it inside the directive:
directive.scope = {
additionalCssClass: "#",
buttons: "#"
};
directive.controller = function($scope) {
$scope.btns = JSON.parse($scope.buttons);
}
I don't suggest this second method, but here's the Plunker Demonstration of that as well.