Angular: Directive with template ng-repeat

by Roman

HTML

<script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
    label Array: {{labels}}
    <hr>
    <div pretty-tag labels-array='labels'></div>
    <hr>
</div>

JavaScript

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

app.controller('Ctrl', ['$scope', function($scope) {
    $scope.labels = [{
        name:"abc",
        color:'blue'
    },{
        name:"xxx",
        color:'red'
    }];
}])

app.directive('prettyTag', function() {
   return {
       restrict: 'A',
       scope: {labelsArray: '='},
       template: ''+
           '<h2>Label list:{{labelsArray}}:</h2>'+
           '<div class="label label-warning" ng-repeat="label in labelsArray">{{label.name}}</div>'
    };
});