AngularJS Google Maps directive

<!DOCTYPE html>
<html>

  <head>
    <title>AngularJS Google Maps</title>
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link data-require="bootstrap@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.0.0" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="app" ng-controller="Ctrl">
    <div class="repeat" ng-repeat="map in maps">
      <gmaps center="map.center" zoom="map.zoom"></gmaps>
      <div class="data">
        <p>
          <label>Latitude</label>
          <input ng-model="map.center.lat" />
          <button ng-click="map.center.lat = map.center.lat - 1">-</button>
          <button ng-click="map.center.lat = map.center.lat + 1">+</button>
        </p>
        <p>
          <label>Longitude</label>
          <input ng-model="map.center.lng" />
          <button ng-click="map.center.lng = map.center.lng - 1">-</button>
          <button ng-click="map.center.lng = map.center.lng + 1">+</button>
        </p>
        <p>
          <label>Zoom</label>
          <input ng-model="map.zoom" />
          <button ng-click="map.zoom = map.zoom - 1">-</button>
          <button ng-click="map.zoom = map.zoom + 1">+</button>
        </p>
      </div>
    </div>
  </body>

</html>

.gmaps {
  margin: 0;
	padding: 0;
	width: 450px;
	height: 450px;
	border: 1px solid #555;
}
.data {
	padding: 0.5em;
}
.data p {
	margin: 0.3em;
}
.data input {
  border: 1px solid #555;
  padding: 3px;
}
label {
	display: inline-block;
	width: 4.5em;
}
.repeat {
	display: inline-block;
	width: 480px;
	height: 620px;
}

"use strict";

var app = angular.module('app', []);

app.controller('Ctrl', function($scope) {

    $scope.maps = [
        { center: {lat: 43.6, lng: 4}, zoom: 10 },
        { center: {lat: 42, lng: 9}, zoom: 8 }
    ];

});

app.directive('gmaps', function factory($timeout) {
    return {
        restrict: 'EA',
        template: '<div class="gmaps"></div>',
        replace: true,
        scope: {
            center: '=center',
            zoom: '=zoom'
        },
        link: function postLink(scope, iElement, iAttrs) {

            var mapOptions = {
                zoom: scope.zoom,
                center: new google.maps.LatLng(scope.center.lat, scope.center.lng),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(iElement[0], mapOptions);

            scope.$watch('center', function () {
                map.setCenter(new google.maps.LatLng(parseFloat(scope.center.lat)
                                                   , parseFloat(scope.center.lng)));
            }, true);

            google.maps.event.addListener(map, 'center_changed', function () {
                $timeout(function () {
                    var center = map.getCenter();
                    scope.center.lat = center.lat();
                    scope.center.lng = center.lng();
                });
            });

            scope.$watch('zoom', function () {
                map.setZoom(parseInt(scope.zoom));
            });

            google.maps.event.addListener(map, 'zoom_changed', function () {
                $timeout(function () {
                    scope.zoom = map.getZoom();
                });
            });

        }
    };
});