title: How to display column dynamically using ag-grid
body: <p>I am new to angularjs technology.I'm using ag-grid and want to display column dynamically</p>
  
  <hr>
  
  <p>my json data is:</p>
  
  <pre><code>[{Date:'12-12-2015',Name:'ammu',mark:20},{Date:'12-12-2015',Name:'appu',mark:24},{Date:'12-12-2015',Name:'anu',mark:27},{Date:'13-12-2016',Name:'ammu',mark:23},{Date:'13-12-2015',Name:'anu',mark:20}]
  </code></pre>
  
  <hr>
  
  <p>My Expected Output is
  <a href="http://i.stack.imgur.com/pxxRd.png" rel="noreferrer">Expected Output</a></p>
  
  <p>Existing Code is given below</p>
  
  <pre><code>$scope.gridOptions = {
      columnDefs: [],
      enableFilter: true,
      rowData: [],
      rowSelection: 'multiple',
      rowDeselection: true
  };
   $scope.customColumns = [];
  Getdetails();
  function Getdetails()
  {
      masterdataFactory.Getdetails()
       .success(function (Student) {
          f (Student.length != 0) {
               for(var i=0;i&lt;Student.length;i++) {
                   $scope.customColumns.push(
                       {
                           headerName: Student[i].Name,
                           field: "Mark",
                           headerClass: 'grid-halign-left'
  
                       }
                   );
               };
              $scope.gridOptions.columnDefs = $scope.customColumns;
              $scope.gridOptions.rowData = Student;
              $scope.gridOptions.api.setColumnDefs();
            }                 
       })
        .error(function (error) {
            $scope.status = 'Unable to load data: ' + error.message;
        });
  }
  </code></pre>
  
  <p>Existing Output is given below
  <a href="http://i.stack.imgur.com/FGdnM.png" rel="noreferrer">Existing Output</a></p>
  
  <p>How can reach my Expected Output From the existing output</p>