title: angularjs how to ng-repeat array values as column headings
body: <p>How to <strong>ng-repeat</strong> the values of the below array as the column headings for my <strong>ng-table</strong>?
  <br/>
  I am trying to display the value from <code>$scope.cols</code> array as the column headings of my table, in other words as the fields, and display all the rows.
  <br/>
  <a href="https://i.stack.imgur.com/vWGrO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vWGrO.png" alt="enter image description here"></a></p>
  
  <p>here is my try:</p>
  
  <pre><code>&lt;div ng-controller="mycontroller as projects"&gt;
      &lt;table ng-table-dynamic="projects.tableParams with projects.cols"
             show-filter="true" class="table table-bordered table-striped"&gt;
          &lt;tr ng-repeat="row in $data"&gt;
              &lt;td ng-repeat="col in $columns"&gt;{{::row[col.field]}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my controller:</p>
  
  <pre><code>app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
  function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {
  
      //show all projects
  
      var showallprojects = DatabaseRef.ref("projects").orderByKey();
      $scope.allprojectslist = $firebaseArray(showallprojects);
      var data = $scope.allprojectslist;
      data.$loaded().then(function(data) {
          console.log(data.length); // data is loaded here
          $scope.cols = Object.keys(data[0]);
          console.log($scope.cols);
          $scope.tableParams = new ngTableParams({
              page: 1, // show first page
              count: 7, // count per page
              sorting: { country: "asc" },
              filter : {
              }
          }, {
              filterSwitch: true,
              total: 0, //data.length, // length of data
              getData: function ($defer, params) {
                  // use build-in angular filter
                  var filteredData = params.filter() ?
                      $filter('filter')($scope.allprojectslist, params.filter()) :
                      $scope.allprojectslist;             
                  var orderedData = params.sorting() ?
                      $filter('orderBy')(filteredData, params.orderBy()) :                    
                      $scope.allprojectslist;
  
                  params.total($scope.allprojectslist.length);
                  // set total for recalc pagination
                  $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));                
              }
          });
      });
  }]);
  </code></pre>
  
  <h2>note:</h2>
  
  <p>the ngtable dynamic model is taken from <a href="https://codepen.io/christianacca/pen/jPxgzY?editors=1010" rel="nofollow noreferrer">here</a> and the <a href="https://github.com/esvit/ng-table/blob/master/src/browser/ngTableDynamic.directive.ts" rel="nofollow noreferrer">doc is here</a>.</p>