ng-repeat in headers and angular-datatables
<p>I have an HTML table which I want to build the most generic as possible.
I am using <code>jquery-datatables</code>, my problem is that I have try to use ng-repeat on headers of the table and <code>jquery-datatables</code> and I got an error of undefied of current data in the headers.
It is clear to me that when I ran the command <code>$(ID).DataTables()</code> in document ready it is run before angular.
The solutions for this situation is using a directive or <code>angular-datatables</code>.
But when I use <code>angular-datatables</code> with attribute <code>datatables="ng"</code> I get a strange error of loading screen. I am clueless about the solutions for this situation, I would be happy for any help.
This my code of my table which should work but doesn't work as expected.</p>

<pre><code>&lt;table id="gases_data_table" datatable="ng" cellpadding="1" cellspacing="1" border="1"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th class="gases_data_table_title" ng-repeat="header in headers"&gt;{{header}}&lt;/th&gt;

                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr ng-repeat="dga in listOfDGAs"&gt;
                    &lt;td class="gases_data_table_item"  ng-repeat="detail in dga"&gt;{{detail}}&lt;/td&gt;
                &lt;/tr&gt;

            &lt;/tbody&gt;
        &lt;/table&gt;
</code></pre>