title: table in Angular using dynamic table headers
body: <p>I was creating an angular app to display data from various data sources. I configured the list of various data sources in a JSON file each data source has a set of values attached to it. 
  Here is an example </p>
  
  <pre><code>var configurableConfigurations=[
     {
         name:"Locations",
         table:"location_set",
         columnList:[
            {
                name:"LOCATION_NAME",
                alias:"Location",
                primary:true
            },
            {
                name:"DESCRIPTION",
                alias:"Description",
                primary:false
            } 
         ]
     },
     {
         name:"System Parameters",
         table:"system_params",
         columnList:[
                    {
                        name:"param_Key",
                        alias:"Parameter",
                        primary:true
                    },
                    {
                        name:"param_Value",
                        alias:"Value",
                        primary:false
                    } 
         ]
     }
  ];
  </code></pre>
  
  <p>I then created an HTML page to display this using angular : the page has 2 parts 
  1. A select box which shows various parameters this is done using ng-repeat
            <code>
   &lt;select name="ConfigurationName" ng-model="selected" ng-options="eachConfiguration.name  for eachConfiguration in configurableConfigurations" ng-change="fetchRequiredConfiguration()"&gt;</code></p>
  
  <ol start="2">
  <li><p>A table which I want to generate using the headers of the parameter selected
  this is my code to do that </p>
  
  <pre><code>&lt;table id="configtable"&gt;
  &lt;thead&gt;
      &lt;tr&gt;                
          &lt;th class="col-md-1" ng-repeat="column in selected.columnList" &gt;{{column.alias}}&lt;/th&gt;                   
      &lt;/tr&gt;
  &lt;/thead&gt;
  </code></pre>
  
  <p></p></li>
  </ol>
  
  <p>This works great for the first time. But when the option is selected again using the select box the table header is not shown.</p>
  
  <p>The table data is being populated properly , its just the table headers that are getting messed up.</p>
  
  <p>Could anyone please help me get around this problem. I am new to angularjs. May be I am missing something important.</p>
  
  <p>Edit ::
  I should Also Mention that I fetch the data from the API and then was using the Data table plugin(<a href="https://www.datatables.net/download/" rel="nofollow">https://www.datatables.net/download/</a>) to show this as Data </p>
  
  <pre><code>    $("#configtable").DataTable({
          "ajax": "../fetchvalue/config/"+this.selected.table,
          destroy: true,
          "columns":{ "data": "ColumnXXX"},
           {"data": "ColumnYYY" }
      });
  </code></pre>
  
  <p>As it turns out, I have a problem with the disappearing headers only when I use the DataTable </p>