<!DOCTYPE html>
<html ng-app='duplicate-transclusion'>
<head>
<link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/normalize.css" />
<link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='duplicateCtrl as ctrl'>
<label>ctrl.someModel: {{ctrl.someModel}}</label>
<input type='text' placeholder="input {{$index + 1}}" ng-model='ctrl.someModel' duplicate="5" />
</body>
</html>
angular.module('duplicate-transclusion', []).
controller('duplicateCtrl', function(){
this.someModel = '';
}).
directive('duplicate', function(){
return {
transclude: 'element',
priority: 1000,
link: function(scope, el, attrs, ctrl, transclude){
var times = parseInt(attrs.duplicate, 10);
var previous = el;
var childScope;
for(var i = 0; i < times; i += 1){
childScope = scope.$new();
childScope.$index = i;
transclude(childScope, function(clone){
previous.after(clone);
previous = clone;
});
}
}
}
});
/* Styles go here */