Problema para mostrar una variable $scope en una segunda vista

[carlosandres1909]

Tengo un inconveniente con un miniproyecto que estoy realizando en Ionic, recurro a ud ya que estan muy interesado en ayudarle a las demás personas, les doy las gracias de antemano... Lo que yo pretendo hacer en el miniproyecto es lo siguiente:

Mostrar en una vista llamada posicion.html la longitud y latitud que extraigo de una función que se encuentra dentro de un controller llamado MapCtrl, que a su vez escucha los movimientos que hago de un marcador draggable (es decir, que puede arrastrarse y cada vez que lo muevo me actualiza la latitud y la longitud --Efectivamente esta actualización la hace muy bien--) en un mapa de google maps que esta contenido en map.html.


el siguiente es el modulo de angular que contiene dicho controller(el único controller que tengo en este miniproyecto) y ademas contiene los .state para la navegación entre muchas cosas mas (es decir tiene toda la parte lógica ):



angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar( true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('map', {
url: '/map',
templateUrl: 'templates/map.html',
controller: 'MapCtrl'
})

.state('posicion', {
url:'/posicion',
templateUrl: 'templates/posicion.html',
controller: 'MapCtrl',

})

;

$urlRouterProvider.otherwise("/map");

})



.controller('MapCtrl', function($scope, $state) {

function openInfoWindow(marker) {

var markerLatLng = marker.getPosition(); //Obtengo la posicion del marcador de mi mapa

$scope.lat = markerLatLng.lat(); // Filtro la Latitud y la envio al $scope
$scope.lon = markerLatLng.lng(); // Filtro la Longitud y la envio al $scope

infoWindow.setContent(['La posicion del marcador es: ', $scope.lat,', ', $scope.lon] .join(''));
infoWindow.open($scope.map, marker);
}

$scope.initialize = function(){ //Función para inicializar el mapa

var myLatLng = new google.maps.LatLng(8.759618,-75.88568299999997);
var mapOptions = {
center: myLatLng,
zoom: 13,
minZoom:13,
maxZoom:17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);

infoWindow = new google.maps.InfoWindow();

delimitarNavegacion();

var marcador = new google.maps.Marker({
position: myLatLng,
draggable: true,
map: $scope.map,
title: 'Que lugar es este?'
});

google.maps.event.addListener(marcador, 'mouseup', function(){
openInfoWindow(marcador);
});

}


delimitarNavegacion = function(){ //Esta funcion la uso para delimitar el mapa (no tiene nada que ver con el error)

var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(8.650947546059943, -75.99071502685547),
new google.maps.LatLng(8.83350919842312, -75.77167510986328)
);

var boundLimits = {
maxLat : allowedBounds.getNorthEast().lat(),
maxLng : allowedBounds.getNorthEast().lng(),
minLat : allowedBounds.getSouthWest().lat(),
minLng : allowedBounds.getSouthWest().lng()
};

var lastValidCenter = $scope.map.getCenter();
var newLat, newLng;

google.maps.event.addListener($scope.map, 'center_changed', function() {
center = $scope.map.getCenter();
if (allowedBounds.contains(center)) {
// still within valid bounds, so save the last valid position
lastValidCenter = $scope.map.getCenter();
return;
}
newLat = lastValidCenter.lat();
newLng = lastValidCenter.lng();

if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
newLng = center.lng();
}
if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
newLat = center.lat();
}
$scope.map.panTo(new google.maps.LatLng(newLat, newLng));
});

} //Cierre de el método delimitarNavegacion()


}) //Termina el controller MapCtrl





Ahora les presento map.html: (aqui es donde se visualiza el mapa)

<ion-view>
<ion-content ng-controller="MapCtrl" ng-init="initialize()">
<div id="map" data-tap-disabled="true"></div>

<div class="bar bar-footer">
<a href="#/posicion" style="width: 100%; height: 100%;">
Hacer click aquí para guardar esta posición !
</a>
</div>
</ion-content>
</ion-view>




Ahora les presento a posicion.html: (aquí es donde quiero mostrar los dos datos, osea la latitud y la longitud que extraigo de la función openInfoWindow(marker) )

<ion-view>
<ion-content>
<div>
<h1>{{lat}}</h1>
<h1>{{lon}}</h1>
</div>
</ion-content>
</ion-view>
;


Al darle click a el enlace Hacer click aquí para guardar esta posición ! me manda a el template pero no me muestra la lon y la lat que yo en la función openInfoWindows(marker) utilice el $scope para poder pasar esos dos datos a la vista: (No me muestra ningún error en consola)

El mapa e muestra bien, se actualiza la latitud y la longitud, lo unico que no hace es mostrar esa longitud y latidtud en el template pisicion.html

Gracias por cualquier ayuda que puedan brindarme, saludos !