title: achieving angular ng-repeat like feature in javascript
body: <p>Im currently working on a code to achieve something like ng-repeat in angular. Basically a for-loop in html.
  the code takes every element with the class "loop" and processes it with the information given through the "info" attribute. Here is the code :
  HTML</p>
  
  <pre><code>&lt;div class="loop" data-info="i in 1 to 10"&gt;
   -i-
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(".loop").each(function(i){
   var loop_info=$(this).attr("data-info");
   var fin=loop_info.match(/(.*) in (\d+) to (\d+)/);
   var variable=fin[1],
   initial=fin[2],
   final=fin[3];
   var htm=$(this).html(),printed="";
   for(j=initial;j&lt;=final;j++){
    var temp=htm;
    var r=new RegExp("-("+variable+")-","g")
    temp=temp.replace(r,j);
    printed+=temp;
   }
   $(this).html(printed);
  }); 
  </code></pre>
  
  <p>Now i have also included the feature to replace the - variable - with the numbers.</p>
  
  <p>Everything worked perfectly but when the loops are nested i.e</p>
  
  <pre><code>&lt;div class="loop" data-info="i in 1 to 10"&gt;
   &lt;div class="loop" data-info="j in 1 to 10"&gt;
    -j-
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>it doesnt work on the nested loop ,i.e -j- doesnt get replaced with the numbers.
    I dont know why this is happening ,any help is appreciated.</p>