store permanent variable in AngularJS app

Question

I am building an AngularJS app where users select a point using Google Maps, and they are given a radius that expands with time. I would also like them to be able to easily share that radius with others by just giving a link. Here are my pages:

Select the point: http://alainwebdesign.ca/pl2/tom/getlocation.html

Search radius: http://alainwebdesign.ca/pl2/

I thought about using ngRoute and keeping the app all on one page which could work for the one user for the one session. But I want others to be able to access the search radius just with the URL. If you have other suggestions (such as using php or JSON) I would like to hear them.

JS for selecting the location:

var map = null;
var markers = [];
var custCenter = {};

function initMap()
{
    var startingCenter = { lat: 49.22, lng: -122.66 };
    custCenter = { lat: 49.22, lng: -122.66 };

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: custCenter,
        mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function (event) {
        var myLatLng = event.latLng;

        deleteMarkers();
        addMarker(myLatLng);

        window.lat = myLatLng.lat();
        window.lng = myLatLng.lng();
        alert(window.lat + ', ' + window.lng);  
    });

    // Adds a marker at the center of the map.
    addMarker(custCenter);
}

// Adds a marker to the map and push to the array.
function addMarker(location) 
{
    var marker = new google.maps.Marker({
        position: location,
        map: map                
    });            

    markers.push(marker);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map); 
    }
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
    clearMarkers();
    markers = [];
}

And JS for the search Radius:

(function (window, ng) {
    ng.module('app', ['uiGmapgoogle-maps'])
    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval",
      function ($scope, $log, GoogleMapApi, $interval) {
          $log.currentLevel = $log.LEVELS.debug;
          var center = { //dynamic var(s)
              latitude: 49.22, 
              longitude: -122.66
          };

          Object.freeze(center);

          $scope.map = {
              center: center,
              pan: false,
              zoom: 16,
              refresh: false,
              events: {},
              bounds: {}
          };

          $scope.map.circle = {
              id: 1,
              center: center,
              radius: 500,
              stroke: {
                  color: '#08B21F',
                  weight: 2,
                  opacity: 1
              },

              fill: {
                  color: '#08B21F',
                  opacity: 0.5
              },
              geodesic: false, // optional: defaults to false
              draggable: false, // optional: defaults to false
              clickable: true, // optional: defaults to true
              editable: false, // optional: defaults to false
              visible: true, // optional: defaults to true
              events: {
                  dblclick: function () {
                      $log.debug("circle dblclick");
                  },
                  radius_changed: function (gObject) {
                      var radius = gObject.getRadius();
                      $log.debug("circle radius radius_changed " + radius);
                  }
              }
          }
          //Increase Radius:
          $interval(function(){
                $scope.map.circle.radius += 30; //dynamic var
          }, 1000);
      } ]);



})(window, angular);

New code for search radius:

(function (window, ng) {
    ng.module('app', ['uiGmapgoogle-maps', 'ui.router'])



    //Should the .configuarion be set here?
       $stateProvider
      .state('inbox', {
          url: '/:center/:radius',
          templateUrl: 'index.html',
          controller: 'MapCtrl',
          resolve: {
            resolveMap: function (MapService, $stateParams) {
              return MapService.getData($stateParams.center, $stateParams.radius);
          }
        }
      })


    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval",
      function ($scope, $log, GoogleMapApi, $interval) {
          $log.currentLevel = $log.LEVELS.debug;
          var center = custCenter;

          Object.freeze(center);

          $scope.map = {
              center: center,
              pan: false,
              zoom: 16,
              refresh: false,
              events: {},
              bounds: {}
          };

          $scope.map.circle = {
              id: 1,
              center: center,
              radius: 500,
              stroke: {
                  color: '#08B21F',
                  weight: 2,
                  opacity: 1
              },

              fill: {
                  color: '#08B21F',
                  opacity: 0.5
              },
              geodesic: false, // optional: defaults to false
              draggable: false, // optional: defaults to false
              clickable: true, // optional: defaults to true
              editable: false, // optional: defaults to false
              visible: true, // optional: defaults to true
              events: {
                  dblclick: function () {
                      $log.debug("circle dblclick");
                  },
                  radius_changed: function (gObject) {
                      var radius = gObject.getRadius();
                      $log.debug("circle radius radius_changed " + radius);
                  }
              }
          }





          //Increase Radius:
          $interval(function(){
    $scope.map.circle.radius += 30; //dynamic var
    $state.transitionTo('/', {
        center: $stateParams.center, 
        radius: $scope.map.circle.radius
    }, 
    { 
        notify: false 
    });
}, 1000); //end of interval function


      } ]); //end of controller



})(window, angular);

Answer 1

What you could do is the following:

Define a route(state) like so in Angular's UI router (not sure that this feature is available in nfRouter:

myApp.config(function($stateProvider) {
  $stateProvider
          .state('location', {
              url: '/:lat/:lon/:radius',
              templateUrl: 'partials/map.html',
              controller: 'MapCtrl',
              resolve: {
                resolveMap: function (MapService, $stateParams) {
                  return MapService.getData($stateParams.lat, $stateParams.lon, $stateParams.radius);
              }
            }
          });

});

Now, change the :radius parameter as your radius increases.

// Within your controller
$interval(function(){
    $scope.map.circle.radius += 30; //dynamic var
    $state.transitionTo('/', {
        lat: $stateParams.lat, 
        long: $stateParams.lon, 
        radius: $scope.map.circle.radius
    }, 
    { 
        notify: false 
    });
}, 1000);

Now, whenever you hit a url, you have all of the data you need to resolve the map. Voila!