lazy loading angularjs example

<!DOCTYPE html>
<html>
  <script type="text/javascript" src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi?ext.js"></script>
  <script type='text/javascript'>
    google.load('visualization', '1', {packages: ['corechart']});

    var GvizService = function($q, $rootScope) {
      var gvizPromise = $q.defer();  
      
      google.setOnLoadCallback(function() {
       gvizPromise.resolve(google.visualization);
       $rootScope.$apply();
      });
      
      this.load = function() {  
        return gvizPromise.promise;
      };
    };
  
    var app = angular.module('myApp', []);
    app.controller('MyCtrl', function($scope) {
      $scope.name = "Name"
    });
    app.directive('chart', function(gviz) {
      return {
        restrict: 'A',
        link: function($scope, $elm, $attr) {
         gviz.load().then(function(gviz) {
           console.log("boo");
           // Create the data table.
           var data = new gviz.DataTable();
           data.addColumn('string', 'Topping');
           data.addColumn('number', 'Slices');
           data.addRows([
             ['Mushrooms', 3],
             ['Onions', 1],
             ['Olives', 1],
             ['Zucchini', 1],
             ['Pepperoni', 2]
           ]);

           // Set chart options
           var options = {'title':'How Much Pizza I Ate Last Night',
                          'width':400,
                          'height':300};

           // Instantiate and draw our chart, passing in some options.
           var chart = new gviz.PieChart($elm[0]);
           chart.draw(data, options);
          });
        }
      }
    });
    app.service('gviz', GvizService);
  </script>
  <body ng-app="myApp"> 
    <div ng-controller = 'MyCtrl'>
      hello {{name}}   
      <div chart></div>
    </div>    
  </body>
  
</html>