AngularJS - Directive with template ng-repeat

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>
   <pretty-tag labelsArray='{{labels}}'></pretty-tag>
        <hr>
</div>

JavaScript

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

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

    };

});