title: How to use Google Charts in an Ionic app
body: <p>I am trying to use Google charts in an Ionic app. However, I only get a blank page when testing the app in my browser. what am I doing wrong here?</p>
  
  <p>My app.js file looks like this:</p>
  
  <pre><code>angular.module('testGC', ['ionic', 'googlechart', 'googlechart-docs'])
  
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
      });
      })
  
  .controller("GenericChartCtrl", function ($scope) {
      $scope.chartObject = {};
  
      $scope.chartObject.type = "BarChart";
  
      $scope.chartObject.data = {"cols": [
          {id: "t", label: "Topping", type: "string"},
          {id: "s", label: "Slices", type: "number"}
      ], "rows": [
          {c: [
              {v: "Mushrooms"},
              {v: 3},
          ]},
          {c: $scope.onions},
          {c: [
              {v: "Olives"},
              {v: 31}
          ]},
          {c: [
              {v: "Zucchini"},
              {v: 1},
          ]},
          {c: [
              {v: "Pepperoni"},
              {v: 2},
          ]}
      ]};
  
      $scope.chartObject.options = {
          'title': 'How Much Pizza I Ate Last Night'
      };
      });
  </code></pre>
  
  <p>My index.html file is the following:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
          &lt;title&gt;&lt;/title&gt;
  
          &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
          &lt;link href="css/style.css" rel="stylesheet"&gt;
  
          &lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
          &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
          --&gt;
  
          &lt;!-- ionic/angularjs js --&gt;
          &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
          &lt;!-- cordova script (this will be a 404 during development) --&gt;
          &lt;script src="cordova.js"&gt;&lt;/script&gt;
  
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/0.1.0/ng-google-chart.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
          &lt;!-- your app's js --&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;ion-pane&gt;
              &lt;ion-header-bar class="bar-stable"&gt;
                  &lt;h1 class="title"&gt;Ionic Blank Starter&lt;/h1&gt;
              &lt;/ion-header-bar&gt;
              &lt;ion-content ng-controller="GenericChartCtrl"&gt;
                  &lt;div google-chart chart1="sampleData" style="width: 100%;height:100%;border: 1px solid green;padding-bottom: 44px" class="has-footer"&gt;
                  &lt;/div&gt;
              &lt;/ion-content&gt;
          &lt;/ion-pane&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>