Angular Google Maps with Dragable Marker

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script src="script.js"></script>
    
  </head>

  <body ng-app="App">
  <div ng-controller="MapsCtrl">
    <div id="map-canvas"></div>
    <input type="text" class="form-control" ng-model="address.full_address" id="full_address">
    <input type="text" class="form-control" ng-model="address.country" id="country">
    <input type="text" class="form-control" ng-model="address.postcode" id="postcode">
    <input type="text" class="form-control" ng-model="address.city" id="city">
    <input type="text" class="form-control" ng-model="address.state" id="state">
    <input type="text" class="form-control" ng-model="address.latlon" id="latlon">
    <div ng-show="error">{{ error }}</div>
  </div>
  </body>

</html>

angular.module('App', []).controller('MapsCtrl', ['$scope',
	function($scope) {
		'use strict';

		var geocoder = new google.maps.Geocoder();
		
		$scope.address = {}

		$scope.map = '';

		$scope.geocodePosition = function(pos) {
			geocoder.geocode({
				latLng: pos
			}, function(responses) {
			  console.log(responses.length)
				if (responses && responses.length > 0) {
					$scope.updateMarkerAddress(responses[0]);
				} else {
					$scope.error = 'I feel free..!!!';
				}
			});
		};

		$scope.updateMarkerAddress = function(str) {

			var split_address = str.formatted_address.split(',')

			$scope.address.full_address = split_address[0];
			document.getElementById('full_address').value = split_address[0];

			for (var i = 0; i < str.address_components.length; i++) {
				for (var j = 0; j < str.address_components[i].types.length; j++) {
					$scope.address.postcode = '';
					if (str.address_components[i].types[j] == 'postal_code') {
						$scope.address.postcode = str.address_components[i].long_name;
						document.getElementById('postcode').value = str.address_components[i].long_name;
					}

					if (str.address_components[i].types[j] == 'administrative_area_level_2') {
						$scope.address.city = str.address_components[i].long_name;
						document.getElementById('city').value = str.address_components[i].long_name;
					}

					if (str.address_components[i].types[j] == 'administrative_area_level_1') {
						$scope.address.state = str.address_components[i].long_name;
						document.getElementById('state').value = str.address_components[i].long_name;
					}

					if (str.address_components[i].types[j] == 'country') {
						$scope.address.country = str.address_components[i].long_name;
						document.getElementById('country').value = str.address_components[i].long_name;
					}
				}
			}
			
		};

		$scope.updateMarkerPosition = function(latLng) {
			$scope.address.latlon = [
				latLng.lat(),
				latLng.lng()
			].join(', ');
			document.getElementById('latlon').value = $scope.address.latlon;
		};

		$scope.initMapMarker = function(marker_latlon) {
			var lat_lon = marker_latlon;
			if (lat_lon === null) {
				lat_lon = "-8.6429208,115.1939819";
				lat_lon = lat_lon.split(",");
			} else {
				lat_lon = lat_lon.split(",");
			}
			var latLng = new google.maps.LatLng(lat_lon[0], lat_lon[1]);
			$scope.map = new google.maps.Map(document.getElementById('map-canvas'), {
				zoom: 12,
				center: latLng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			});
			var marker = new google.maps.Marker({
				position: latLng,
				title: 'Marker',
				map: $scope.map,
				draggable: true
			});

			// Update current position info.
			$scope.geocodePosition(latLng);

			google.maps.event.addListener(marker, 'drag', function() {
				$scope.updateMarkerPosition(marker.getPosition());
			});

			google.maps.event.addListener(marker, 'dragend', function() {
				$scope.geocodePosition(marker.getPosition());
			});
		};
		
		$scope.initMapMarker('-8.74884888573269, 115.16788937070305')

	}
]);

#map-canvas {
  height: 300px;
  width:100%;
  margin: 0px;
  padding: 0px
}