JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.1.3/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<parent-directive></parent-directive>

JavaScript

var app = angular.module('app', []);
app.directive('parentDirective', function(){
    return {
        restrict: 'E',
        //replace: true,
        link: function(scope) {
            scope.collection = {
                    id1: {attr: 1},
                    id2: {attr: 2}
                };
        },
        //change template to test hardcoded "element" attribute
        //template: '<div><child-directive ng-repeat="(key, el) in collection" element="collection.id1"></child-directive></div>',
        template: '<div><child-directive ng-repeat="(key, el) in collection" element="collection.{{key}}"></child-directive></div>'
    };    
});
app.directive('childDirective', function(){
    return {
        restrict: 'E',
        scope: {
            element: '='
        },
        template: '<div>attr = {{element.attr}}!</div>'
    };    
});