title: Update to $scope object in AngularJS Service does not update View
body: <p>I'm trying to implement Google maps in Angular / IonicFramework. I'm using a directive, a service, and a controller. I have a map, marker, and geolocation object in <code>$scope</code>. The map object and the marker object in the view updates from the service however the geolocation object doesn't.</p>
  
  <p>The template/view:</p>
  
  <pre><code>&lt;div class="item item-input item-stacked-label item-icon-right"&gt;
    &lt;div&gt;
      Location
      &lt;a ng-click="centerOnMe()"&gt;
        &lt;i class="icon ion-android-locate" style="font-size:24px"&gt;&lt;/i&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;textarea style="margin-top: 0px; margin-bottom: 0px; height: 45px;" placeholder="Location not found." disabled&gt;{{geoloc.addr}}&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class="item item-input"&gt;
    &lt;div class="input-label"&gt;Map&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="item item-input" style="height:15em;"&gt;
    &lt;ion-content scroll="false"&gt;
      &lt;map on-create="mapCreated(map, geoloc, marker)"&gt;&lt;/map&gt;
    &lt;/ion-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The map directive:</p>
  
  <pre><code>angular.module('starter.directives', [])
  
  .directive('map', function(MapService) {
    return {
      restrict: 'E',
      scope: {
        onCreate: '&amp;'
      },
      link: function ($scope, $element, $attr) {
        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(43.07493, -89.381388),
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          var map = new google.maps.Map($element[0], mapOptions);
          var geoloc = {
            lat: null, lng: null, str: null, brgy: null,
            muni: null, reg: null, addr: null
          };
          var marker = new google.maps.Marker({
            map: map
          });
  
          $scope.onCreate(
            {
              map: map,         //link map to map in controller
              geoloc: geoloc,   //link geoloc to geoloc in controller
              marker: marker    //link marker to marker in controller
            });
  
          // Stop the side bar from dragging when mousedown/tapdown on the map
          google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
            e.preventDefault();
            return false;
          });
        }
  
        if (document.readyState === "complete") {
          initialize();
        } else {
          google.maps.event.addDomListener(window, 'load', initialize);
        }
      }
    }
  });
  </code></pre>
  
  <p>The map controller:</p>
  
  <pre><code>angular.module('starter.controllers', [])
  
  .controller('MapCtrl', function($scope, $ionicLoading, MapService) {
    $scope.mapCreated = function(map, geoloc, marker) {
      $scope.map = map;       //sets the map from the directive to the $scope
      $scope.geoloc = geoloc; //sets the geoloc from the directive to the $scope
      $scope.marker = marker; //sets the marker from the directive to the $scope
    };
  
    $scope.centerOnMe = function () {
      console.log('Centering..');
      if (!$scope.map &amp;&amp; !$scope.marker &amp;&amp; !$scope.geoloc) {
        return;
      }
      $scope.loading = $ionicLoading.show({
        template: 'Getting current location...',
        noBackdrop: true
      });
  
      $scope.geoloc = MapService.getCurrentLocation($ionicLoading, $scope.map, $scope.geoloc, $scope.marker);
      // ^^^ This doesn't seem to work. $scope.geoloc doesn't get updated immediately, while $scope.map and $scope.marker gets updated immediately. Has to be invoked twice for $scope.geoloc to be updated.
    }
  });
  </code></pre>
  
  <p>The map service:</p>
  
  <pre><code>angular.module('starter.services', [])
  
  .factory('MapService', function() {
    return {
      getCurrentLocation: function($ionicLoading, map, geoloc, marker) {
        navigator.geolocation.getCurrentPosition(function (pos) { //callback if get location succeeds
  
            geoloc.lat = pos.coords.latitude;
            geoloc.lng = pos.coords.longitude;
  
            var latlngpos = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
            var geocoder = new google.maps.Geocoder();
  
            geocoder.geocode({'latLng': latlngpos}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                  map.setZoom(16);
                  marker.setOptions({
                      position: latlngpos,
                      map: map
                  });
  
                  geoloc.str = results[0].address_components[0].short_name; //type:route
                  geoloc.brgy = results[0].address_components[1].short_name; //type:neighborhood
                  geoloc.muni = results[0].address_components[2].short_name; //type:locatlity
                  geoloc.reg = results[0].address_components[3].short_name; //type:admnistrative_area_level_1
  
                  geoloc.addr = results[0].formatted_address;
  
                } else {
                  console.log('No results found');
                }
              } else {
                console.log('Geocoder failed due to: ' + status);
              }
            });
  
            map.setCenter(latlngpos);
            $ionicLoading.hide();
        }, function (error) { //callback if get location fails
          alert('Unable to get location: ' + error.message);
        });
  
        return geoloc;
      }
    } 
  })
  ;
  </code></pre>
  
  <p>I based my implementation here:</p>
  
  <p><a href="http://www.jeffvandalsum.com/integrating-google-maps-api-with-angular/" rel="nofollow noreferrer">http://www.jeffvandalsum.com/integrating-google-maps-api-with-angular/</a></p>
  
  <p>And I already followed the solutions as suggested here, however the <code>$scope.geoloc</code> object still doesn't update:</p>
  
  <p><a href="https://stackoverflow.com/questions/26718873/angular-directive-scope-between-google-maps-and-a-controller">Angular directive scope between google maps and a controller</a></p>
  
  <p><a href="https://stackoverflow.com/questions/24071203/phonegap-not-firing-googlemaps-v3-domlistener-function-inside-angularjs-directiv">Phonegap not firing GoogleMaps v3 domListener function inside Angularjs directive</a></p>