Q:

AngularJS updating $scope variable and output to pre

I'm using the following jsBin example
The default values are given inside $scope.position and when someone enters a location in the input box and hits the button, Google Maps runs a check for that location and returns the new lat and lng of the location and what I want is for the pre to get updated with the new lat and lng values.
    var myApp = angular.module('myApp', []);

function appCtlr($scope, $http, $timeout) {
    var map, marker, mapOptions, myLatlng;

    $scope.output = function(lat, lng) {
        $scope.codeoutput = "var map;\nfunction initialize() {\n  var myLatlng = new google.maps.LatLng(" + lat + "," + lng + ");\n  var mapOptions = {\n    zoom: 4,\n    center: myLatlng\n  }\n\n  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);\n\n  var marker = new google.maps.Marker({\n    position: myLatlng,\n    map: map\n  });\n}\n\ngoogle.maps.event.addDomListener(window, 'load', initialize);\n\n<div id=\"map_canvas\"></div>";
    };

    function initialize() {
        $scope.position = {};
        $scope.position.lat = -25.363882;
        $scope.position.lng = 131.044922;
        myLatlng = new google.maps.LatLng($scope.position.lat, $scope.position.lng);
        mapOptions = {
            zoom: 4,
            center: myLatlng
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });
        $scope.output($scope.position.lat, $scope.position.lng);

    }

    $scope.reposition = function() {
        url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + $scope.location + '&sensor=false';

        $http.get(url, null, function(data) {
            if (data.status != "ZERO_RESULTS") {
                var p = data.results[0].geometry.location;
                $scope.position.lat = p.lat;
                $scope.position.lng = p.lng;
                latlng = new google.maps.LatLng(p.lat, p.lng);
                marker.setPosition(latlng);
                map.panTo(latlng);
            }

            $scope.output($scope.position.lat, $scope.position.lng);
            console.log($scope.position);
            console.log($scope.codeoutput);
        });
    };

    initialize();
}

A:

You need to call $scope.output() in your success callback
    $http.get(url, null, function(data) {

    }).success(function(data) {

      if (data.status != "ZERO_RESULTS") {
            var p = data.results[0].geometry.location;
            $scope.position.lat = p.lat;
            $scope.position.lng = p.lng;
            latlng = new google.maps.LatLng(p.lat, p.lng);
            marker.setPosition(latlng);
            map.panTo(latlng);
        }

      $scope.output($scope.position.lat, $scope.position.lng);

    });

Updated Bin

