AngularJS Google Maps directive Seoul Map

<!DOCTYPE html>
<html>
<head>
  <title>AngularJS Google Maps</title>
  <link rel="stylesheet" href="style.css"/>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="app.js"></script> 
</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 id="info-box">?</div>
    <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;
}
info-box {
        background-color: white;
        border: 1px solid black;
        bottom: 30px;
        height: 20px;
        padding: 10px;
        position: absolute;
        left: 30px;
      }

"use strict";

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

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

  $scope.maps = [{
    center: {
      lat: 37.55,
      lng: 127.01
    },
    zoom: 10
  }];

});

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);
      map.data.loadGeoJson('https://raw.githubusercontent.com/zappySound/air-pollution/master/demo-data/seoulDistricts.json');
      
      map.data.addListener('mouseover', function(event) {
          document.getElementById('info-box').textContent =
              event.feature.getProperty('name');
          map.data.revertStyle();
          map.data.overrideStyle(event.feature, {strokeWeight: 8})
        });  
      
      scope.$watch('center', function() {
        map.setCenter(new google.maps.LatLng(
          parseFloat(scope.center.lat),
          parseFloat(scope.center.lng)
        ));
      }, true);

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

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

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

    }
  };
});