title: Angular create a recursive loop in template to render comments tree
body: <p>Hi I want to render the comments of my applications as comments and its reply's but I dont have idea on how to do it with my data:</p>
  
  <p>My data looks like:</p>
  
  <pre><code>"comments": [
    {
      "id": "30",
      "content": "Comment 1",
      "parent": "0",
    },
    {
      "id": "31",
      "content": "Comment 2",
      "parent": "0",
    },
    {
      "id": "32",
      "content": "comment 3",
      "parent": "0",
    },
    {
      "id": "33",
      "content": "sub comment 1-1",
      "parent": "30",
    },
    {
      "id": "34",
      "content": "sub comment 2-1",
      "parent": "31",
    },
    {
      "id": "35",
      "content": "sub sub comment 1-1-1",
      "parent": "33",
    },
    {
      "id": "36",
      "content": "sub comment 1-2",
      "parent": "30",
    }
  ]
  </code></pre>
  
  <p>where <code>parent</code> refers to the id of the comment that reply, so it shoold be shown like:</p>
  
  <pre><code>Comment 1
    sub comment 1-1
      sub sub comment 1-1-1
    sub comment 1-2
  Comment 2
    sub comment 2-1
  Comment 3
  </code></pre>
  
  <p>but until now i only have a list in the order of my data</p>