Error loading google map using angular js

Question

I am using the following javascript to load a google map into my angular.js web application. The map works great when I'm on the page and updated; however, when I LINK TO PAGE from another location in my application, the map does not load. I believe this is due to the fact that the DOM listener does not register the "load" event, but is not sure. I would appreciate help in resolving this.

authApp.controller('BarsController', function($scope, $rootScope, BarService) {
  $scope.currentUser = Parse.User.current();
  $scope.title = $rootScope.title;

  function initialize(){
      var mapOptions = {
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

      $scope.map = map;
      if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
              var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

              $scope.map.setCenter(pos);

              //Set myLocation Pin
              var marker = new google.maps.Marker({
                  position: pos,
                  map: $scope.map,
                  title: 'My Location',
                  icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
              });

          }), function(error){
            console.log('Unable to get location: ' + error.message);
          };
      }
   }; 
   google.maps.event.addDomListener(window, 'load', initialize);
 });  

Solution provided by DMullings:

 authApp.controller('BarsController', function($scope, $rootScope, BarService) {
  $scope.currentUser = Parse.User.current();
  $scope.title = $rootScope.title;

  $scope.initialize = function(){
      var mapOptions = {
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

      $scope.map = map;
      if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
              var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

              $scope.map.setCenter(pos);

              //Set myLocation Pin
              var marker = new google.maps.Marker({
                  position: pos,
                  map: $scope.map,
                  title: 'My Location',
                  icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
              });

          }), function(error){
            console.log('Unable to get location: ' + error.message);
          };
      }
   }; 
 }); 

HTML:

<div data-ng-controller="BarsController" data-ng-init="initialize()">   
  //HTML Content Here
</div>  

Answer 1

Instead of trying to start the initialization function in an event, loadyou can try usingng-init

initialize :

$scope.initialize = function(){
    //code goes here
}; 

, angular

<div data-ng-controller="BarsController" data-ng-init="initialize()"></div>