<!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 */