AngularJS - Директивы против контроллеров

Я пытаюсь создать свое первое приложение, используя AngularJS. Тем не менее, я немного смущен, если мне нужно использовать директивы для моего конкретного случая.

У меня есть простая страница карты, где мне нужно показать значение lat/lon выбранного региона. На данный момент я вообще не использую директивы. Я делаю все в контроллере и использую частичные для отображения результатов. Я не планирую повторно использовать свой вид карты в любом другом месте. Вот почему я не чувствовал, что мне нужна директива.

С другой стороны, я где-то читал, что каждый раз, когда вы пытаетесь манипулировать DOM в своем контроллере (что я делаю с помощью API карт google), вы должны перенести эту часть на директивы.

Здесь мой простой контроллер:

function MapViewController($scope) {
  $scope.zoom = 6;
  $scope.lat = 37;
  $scope.lon = -122;
  var mapOptions = {
    center: new google.maps.LatLng($scope.lat, $scope.lon),
    zoom: $scope.zoom,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  $scope.map = new google.maps.Map(
      document.getElementById('map-canvas'), mapOptions);

  /*
   * Update zoom and other map attributes.
   */
  google.maps.event.addListener($scope.map, 'center_changed', function() {
    $scope.$apply(function () {
      $scope.zoom = $scope.map.getZoom();
      var center = $scope.map.getCenter();
      $scope.lat = center.lat();
      $scope.lon = center.lng();
      var bounds = $scope.map.getBounds();
      var northEast = bounds.getNorthEast();
      $scope.northEastLat = northEast.lat();
      $scope.northEastLon = northEast.lng();
      var southWest = bounds.getSouthWest();
      $scope.southWestLat = southWest.lat();
      $scope.southWestLon = southWest.lng();
    });
  });

  /*
   * Set zoom and other map attributes.
   */
  google.maps.event.addListener($scope.map, 'some event', function() {
    $scope.$apply(function () {
      ...
    });
  });

  /*
   * Add markers to map.
   */
  google.maps.event.addListener($scope.map, 'another event', function() {
    $scope.$apply(function () {
      ...
    });
  });

}

И вот мои частичные:

  <div id="map-controllers" class="span4">
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputNumber">Zoom:</label>
        <div class="controls">
          <input type="text" class="input-mini" placeholder="zoom" value="{{ zoom }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">Latitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Latitude" value="{{ lat }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">Longitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Longitude" value="{{ lon }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">North East Latitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Latitude" value="{{ northEastLat }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">North East Longitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Longitude" value="{{ northEastLon }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">South West Latitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Latitude" value="{{ southWestLat }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">South West Longitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Longitude" value="{{ southWestLon }}">
        </div>
      </div>
    </form>
  </div>