mapdemo.js

angular.module('appMap', ['ui.map'])
  .controller('MapCtrl', ['$scope', function ($scope) {
  $scope.mapOptions = {
    center: new google.maps.LatLng(37.7833, -122.4167),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true,
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  };
  $scope.mapTypes = [
    google.maps.MapTypeId.ROADMAP,
    google.maps.MapTypeId.SATELLITE,
    google.maps.MapTypeId.HYBRID,
    google.maps.MapTypeId.TERRAIN
  ]
  $scope.$watch('mapOptions.zoom', function(n) {
    if (n) {
      $scope.myMap.setOptions($scope.mapOptions);
    }
  });
  $scope.$watch('mapOptions.mapTypeId', function(n) {
    if (n) {
      $scope.myMap.setOptions($scope.mapOptions);
    }
  })
}]);

function onGoogleReady() {
  angular.bootstrap(document.getElementById("map"), ['appMap']);

}