title: KendoGrid/Angular: cannot create grid columns/data dynamically
body: <p><a href="http://plnkr.co/edit/4YPIJKigfnDxy1Z1Cemt?p=preview" rel="nofollow">In this plunk</a> I have an empty grid (without columns). When I click on "Build Grid" I need to add columns (taken from an array) and also add a row to the table.</p>
  
  <p>The problem is that the columns are not added to the grid, any ideas? If I try to refresh the grid, I get an <code>undefined</code> error.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button ng-click="buildGrid()"&gt;Build Grid&lt;/button&gt;
  &lt;div kendo-grid="grid" k-options="gridOptions" k-data-source="ds"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var app = angular.module("app", [ "kendo.directives" ]);
  
  function MyCtrl($scope) {
  
      $scope.ds = []
  
      $scope.colsList =  [{ name: "col1" },
                          { name: "col2" },
                          { name: "col3" },
                          { name: "col4" }];
  
  
    var gridCols = [];
  
      $scope.gridOptions = {
              columns: gridCols
    };
  
  
  $scope.buildGrid = function() {
  
          $scope.data = {};
  
          for (var x=0;x&lt;$scope.colsList.length;x++) {
              var col = {};
              col.field = $scope.colsList[x].name;
              col.title = $scope.colsList[x].name;
              $scope.data[col.field] = "" + (1111 * (x+1));
              gridCols.push(col);
          }
  
          // add one row to the table
          $scope.ds.push($scope.data);
          //$scope.grid.refresh();
  
      };  
  }
  </code></pre>