title: AngularJS change variable outside of function
body: <p>I have a function in Angular that changes the center value for Google Maps when a user clicks on the map. The correct center value is then alerted to the screen but the marker does not change to that position like it should. </p>
  
  <p>Web page: <a href="http://alainwebdesign.ca/pl2/#/getLocation" rel="nofollow">http://alainwebdesign.ca/pl2/#/getLocation</a></p>
  
  <p>Controller:</p>
  
  <pre><code>.controller('GetlocationCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$state", "$stateParams",
        function ($scope, $log, GoogleMapApi, $state, $stateParams) {
            $log.currentLevel = $log.LEVELS.debug;
            center = { latitude: 49.22, longitude: -122.66 }; //default center
            alert(JSON.stringify(center));
  
            console.log($stateParams);
  
            $scope.map = {
                center: center,
                pan: false,
                zoom: 16,
                refresh: false,
                events: 
            { click: function newCenter(mapModel, eventName, originalEventArgs)
                {
                  $scope.$apply(function(){
                    var e = originalEventArgs[0];
                    center = { latitude: e.latLng.lat(), longitude: e.latLng.lng() };
                    alert(JSON.stringify(center));
                    return center;
                  });
                }
            }
  
            }
  </code></pre>
  
  <p>HTML partial/view:</p>
  
  <pre><code>&lt;!--Add ability to input location as address--&gt;
  
  &lt;div style="height: 100%"&gt;
      &lt;h1&gt;TEST&lt;/h1&gt; &lt;!--NOT SHOWING ON PAGE WHICH MEANS THIS IS NOT BEING INVOKED WHEN
                    URL IS: '/getLocation' like it should--&gt;
          &lt;ui-gmap-google-map
                          center='map.center'
                          zoom='map.zoom'
                          draggable='map.draggable'
                          dragging='map.dragging'
                          refresh='map.refresh'
                          options='map.options'
                          events='map.events'
                          pan='map.pan'&gt;
  
  
          &lt;ui-gmap-marker
          idKey='1'
          events='map.events'
          coords='map.center'
          &gt;
         &lt;/ui-gmap-marker&gt;
  
      &lt;/ui-gmap-google-map&gt;
  
  &lt;script src='//maps.googleapis.com/maps/api/js?key=AIzaSyD4_0KuPivZyV-1EwNGmBCgLc_Z0o8Dyw8'&gt;&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>