title: Add button to table chart (AngularJS/Google Charts)
body: <p>I am trying to use the <a href="https://developers.google.com/chart/interactive/docs/gallery/table" rel="nofollow">Table Charts</a> component in an <a href="https://code.angularjs.org/1.2.10/docs/api" rel="nofollow">AngularJS 1.2.10</a> app.</p>
  
  <p>I wrote a wrapper directive, which brings table chart into an AngularJS context.</p>
  
  <pre><code>    angular.module('my.charts.table', [])
          .directive('myTableChart', [function() {
              return {
                  restrict : 'E',
                  scope : {
                      columns : '=',
                      rows : '='
                  },
                  templateUrl : 'my.charts.table/myTableChart.tmpl.html',
                  link : function(scope, element) {
                      var data = new google.visualization.DataTable();
  
                      // add columns
  
                      var table = new google.visualization.Table(element[0].childNodes[0]);
  
                      table.draw(data, { allowHtml : true }); 
                  } 
             };
         }
    ]);
  </code></pre>
  
  <p>For given columns and rows the data table is initialized and drawn.</p>
  
  <p>What I want to do is to add a column, which holds a button with AngularJS directives.</p>
  
  <pre><code>&lt;button class="btn btn-primary" onclick="alert(\'Works\')" ng-click="testLog()"&gt;Test&lt;/button&gt;
  </code></pre>
  
  <p>You can assume that the <em>testLog()</em> method is defined on the current scope.</p>
  
  <p>The table chart component allows the direct insertion of HTML as cell values. However, this lies outside of the AngularJS lifecycle and, therefore, simply inserting the above HTML snippet won't work.</p>
  
  <p>Now, I tried to compile and link the button manually.</p>
  
  <pre><code>var btn = $compile('&lt;button class="btn btn-primary" onclick="alert(\'Works\')" ng-click="testLog()"&gt;Test&lt;/button&gt;')(scope);
  </code></pre>
  
  <p>I can append the button manually.</p>
  
  <pre><code>element.append(btn);
  </code></pre>
  
  <p>However, the table chart expects HTML, not a DOM element. 
  If I pass <em>btn[0].outerHTML</em>, the ngClick directive won't trigger.</p>
  
  <p>Is there a way to solve this problem?</p>
  
  <p>Here is the complete code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>google.load('visualization', '1', {
    packages: ['corechart', 'table']
  });
  
  google.setOnLoadCallback(function() {
    angular.bootstrap(document, ['my.app']);
  });
  
  angular.module('my.app', [])
    .directive('myTableChart', function() {
      return {
        restrict: 'E',
        scope: {
          columns: '=',
          rows: '='
        },
        template: '&lt;div&gt;&lt;/div&gt;',
        link: function(scope, element) {
          var data = new google.visualization.DataTable();
  
          for (var i = 0; i &lt; scope.columns.length; i++) {
            data.addColumn(scope.columns[i].type, scope.columns[i].name);
          }
  
          data.addRows(scope.rows);
  
          var table = new google.visualization.Table(element[0].childNodes[0]);
          table.draw(data, {
            width: '100%',
            allowHtml: true
          });
        }
      };
    })
    .directive('myTestTable', ['$compile',
      function($compile) {
        return {
          restrict: 'E',
          scope: {},
          template: '&lt;my-table-chart ng-if="curRows != null" columns="curCols" rows="curRows"&gt;&lt;/my-table-chart&gt;',
          link: function(scope, element) {
            scope.curCols = [{
              type: 'string',
              name: 'Test'
            }, {
              type: 'string',
              name: ''
            }];
  
            scope.curRows = [];
  
            scope.testLog = function() {
              alert('Works too');
            };
  
            var btn = $compile('&lt;button class="btn btn-primary" onclick="alert(\'Works\')" ng-click="testLog()"&gt;Test&lt;/button&gt;')(scope);
  
            var btnHtml = btn[0].outerHTML;
  
            element.append(btn);
  
            scope.curRows.push(['test entry', btnHtml]);
          }
        };
      }
    ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;my-test-table&gt;&lt;/my-test-table&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://www.google.com/jsapi"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>