Maker content rules

Working out an approach for displaying the states and content items using directives

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<!-- for some reason with jsFiddle need to define googleapis here 
instead of resources -->

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div ng-app="demoApp">
<section id="directives-map" ng-controller="MapCtrl">
                <div class="page-header">
                    <h1>Google Maps</h1>
                </div>
                <div class="well">
                    <div class="row">
                        <div class="span3">
                            <h4>Click to add a marker!</h4>
                            <p>{{zoomMessage}}</p>
                            <ul>
                                <li ng-repeat="marker in myMarkers">
                                    <a class="btn" ng-click="myMap.panTo(marker.getPosition())">
                                        Pan to Marker {{$index}}
                                    </a>
                                </li>
                            </ul>
                            
                            <!-- this is the confusing part. we have to point the map marker directive
                                at an existing google.maps.Marker object, so it can hook up events -->
                            <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
                                ui-event="{'map-click': 'openMarkerInfo(marker)'}" class="bombaymap">
                            </div>
                            
                            <div ui-map-info-window="myInfoWindow">
                                <h1>Marker</h1>
                                Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
                                <a class="btn btn-primary" ng-click="setMarkerPosition(currentMarker, currentMarkerLat,...

CSS

/*** Map ***/
#directives-map .map {
  height: 400px;
}
.bombaymap{
     background-color:#00ff00;   
}
}

JavaScript

angular.module('demoApp', ['ui']);

function MapCtrl($scope) {
  $scope.myMarkers = [];

  $scope.mapOptions = {
    center: new google.maps.LatLng(35.784, -78.670),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }; 

  $scope.addMarker = function($event) {
    $scope.myMarkers.push(new google.maps.Marker({
      map: $scope.myMap,
      position: $event.latLng
      }));
    };

    $scope.setZoomMessage = function(zoom) {
      $scope.zoomMessage = 'You just zoomed to '+zoom+'!';
      console.log(zoom,'zoomed')
    };

    $scope.openMarkerInfo = function(marker) {
      $scope.currentMarker = marker;
      $scope.currentMarkerLat = marker.getPosition().lat();
      $scope.currentMarkerLng = marker.getPosition().lng();
      $scope.myInfoWindow.open($scope.myMap, marker);
    };

    $scope.setMarkerPosition = function(marker, lat, lng) {
      marker.setPosition(new google.maps.LatLng(lat, lng));
    };
}