title: Create a table with colspan and a dynamic amount of columns
body: <p>I'm new to angular and would like to create a table with an unknown amount of columns. Additionally the table contains a second row of header columns, also with a different and unknown amount of columns. I have to use colspan in the second line, but don't know how. What would be a good way, maybe to create a directive? Or is there a simpler solution? </p>
  
  <p>For a better understanding I created: <a href="http://jsfiddle.net/uyLrjgyz/2/" rel="nofollow noreferrer">http://jsfiddle.net/uyLrjgyz/2/</a>. </p>
  
  <p>I get all the data in JSON format like:</p>
  
  <pre><code>{
    "header": {
      "columns": [
        {
          "name": "0ColHeader",
          "subcolumns": [
            {
              "name": ""
            }
          ]
        },
        {
          "name": "1ColHeader",
          "subcolumns": [
            {
              "name": "1Col1SubColHeader"
            },
            {
              "name": "1Col2SubColHeader"
            },
            {
              "name": "1Col3SubColHeader"
            }
          ]
        },
        {
          "name": "2ColHeader",
          "subcolumns": [
            {
              "name": "2Col1SubColHeader"
            }
          ]
        },
        {
          "name": "3ColHeader",
          "subcolumns": [
            {
              "name": "3Col1SubColHeader"
            },
            {
              "name": "3Col2SubColHeader"
            }
          ]
        }
      ]
    },
    "rows": {
      "data": [
        [
          {
            "value": "text"
          },
          {
            "value": "0"
          },
          {
            "value": "0"
          },
          {
            "value": "1"
          },
          {
            "value": "0"
          },
          {
            "value": "1"
          },
          {
            "value": "0"
          }
        ],
        [
          {
            "value": "more text"
          },
          {
            "value": "1"
          },
          {
            "value": "0"
          },
          {
            "value": "1"
          },
          {
            "value": "1"
          },
          {
            "value": "0"
          },
          {
            "value": "1"
          }
        ]
      ]
    }
  }
  </code></pre>
  
  <p>I can modify the json, as long as I don't have to convert it to much at the backend.
  This <a href="https://stackoverflow.com/questions/12755881/angularjs-and-template-table">angularjs and template table</a> is related to my problem, but it's a little bit skimped. </p>