title: Using ag-grid, how can I get the `api` attribute to not be null when working with angular 1.5 and directives?
body: <p><strong>Disclaimer</strong> </p>
  
  <p>First, I'd like to note I'm completely new to Angular so I am probably doing something wrong / dumb. I have finally come to the point where I'm not sure what else to try.</p>
  
  <p><strong>Context</strong></p>
  
  <p>I an working on a project where I need to have a grid that can contain nested or grouped columns. The site is also being built in AngularJS 1.5.9. One of the features of the grid is to be able to hide or show a set of columns in the grid based on user selections. Also, in using AngularJS I am trying to stick with directives as it makes the components a bit easier to use/re-use across the application. Also, in my opinion, it makes the code much more readable.</p>
  
  <p><strong>Problem / Question</strong></p>
  
  <p>Currently, when the user clicks the toggle checkbox on the template, the <code>api</code> attribute on the <code>gridOptions</code> object is undefined. As far as I can tell from the <a href="https://www.ag-grid.com/javascript-grid-api/" rel="nofollow noreferrer">documentation on ag-grid</a> says that this attribute should exist once the grid is bound. <strong>How do I get this to work properly without abandoning the directive?</strong> <a href="https://plnkr.co/edit/cSPWOP?p=preview" rel="nofollow noreferrer">View the problem on Plunker</a></p>
  
  <p><strong>What I've tried</strong></p>
  
  <ul>
  <li>Using <code>$scope</code> directly</li>
  <li>Using a variable to store the <code>this</code> reference</li>
  <li>Understanding / adapting things from <a href="https://stackoverflow.com/questions/35263658/how-to-initialize-ag-grid-api-in-angular2-application">this angular 2 example</a> or <a href="https://stackoverflow.com/questions/33312222/wrap-ag-grid-in-an-angular-directive">this SO question</a></li>
  </ul>
  
  <p>app.js</p>
  
  <pre><code>(function(){
    var app = angular.module('app', ['agGrid']);
    agGrid.initialiseAgGridWithAngular1(angular);
  
    app.directive('gridExample', function(){
      return {
        restrict: 'E',
        templateUrl:'sample-grid.html',
        controller: ['$scope', function($scope){
          // Objects
          $scope.options = {
            toggleColumn: true
          };
          // var ctrl = this;
  
          var rowData = [
            {col1: '1a', col2: '2a', col3: '3a'},
            {col1: '1b', col2: '2b', col3: '3b'},
            {col1: '1c', col2: '2c', col3: '3c'},
          ];
  
          // Methods
          $scope.loadData = function(){
            var columns = [];
  
            columns.push({headerName: "Col 1", field: "col1"});
  
            if ($scope.options.toggleColumn == true) {
              columns.push({headerName: "Col 2", field: "col2"});
            }
  
            columns.push({headerName: "Col 3", field: "col3"});
  
            $scope.gridOptions = {
              columnDefs: columns,
              rowData: rowData,
              angularCompileRows: false,
              enableColResize: true
            };
          };
  
          $scope.refreshGrid = function() {
            $scope.loadData();
  
            // HERE: I've tried this and $scope
            this.gridOptions.api.refreshView();
          };
  
          $scope.loadData();
        }]
      };
    });
  })();
  </code></pre>
  
  <p>Template Markup</p>
  
  <pre><code>&lt;label&gt;
    &lt;input type="checkbox"
           ng-model="options.toggleColumn"
           ng-click="refreshGrid()" /&gt;
           Toggle Col 2
  &lt;/label&gt;
  &lt;div ag-grid="gridOptions" class="ag-blue" style="height: 300px;"&gt;&lt;/div&gt;
  </code></pre>