Angular directive with ng-repeat in template

Question

I'm experimenting with angular 1.2 directives. Mine has a template w/ ng-repeat. The variable passed in param does not seem to be seen by the directive. Here is the code: Fiddle: http://jsfiddle.net/supercobra/vmH3v/ Controller: ``` 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: '

Label list:{{labelsArray}}:

', restrict: 'E', }; }); ``` HTML: ```

label Array: {{labels}}

```

Accepted Answer

There are a few things that need to be changed for the directive to see the labels array. First, change the pretty-tag HTML to this: ``` ``` Note that labelsArray was changed to labels-array (directive & attribute names should follow this dashed convention) and {{labels}} was simply changed to labels (so that a bi-directional binding can be established on the array). Next, inside your directive, the labelsArray scope should be '=' so that the local scope property can reference the parent scope property: ``` scope: {labelsArray: '='}, ``` Fiddle: http://jsfiddle.net/Hmcj8/

Angular directive with ng-repeat in template

Solution

Problem