ng-click directive is not calling the entire function

Question

I'm trying to move a marker inside the google maps map. I have a function to move them and they are working fine. For testing, I had invoked them inside the script and they are working as expected.

But when I am trying to call the function within the ng-click directive, the function is getting called but the entire code is not being executed.

<md-button class="md-raised md-primary" ng-click="x()">Click here to move the marker</md-button>

Method:

$scope.x = function ()
      {
        console.log('a');
          $scope.marker = {
          id: 6,
          coords: {latitude:-28.226349,longitude:-52.381581}
          };
      }

Inside the console the 'a' is getting printed, but the marker doesn't move to latitude: -28.226349, longitude: -52.381581.

If I call the function inside the script like this:

$scope.x = function ()
      {
        console.log('a');
          $scope.marker = {
          id: 6,
          coords: {latitude:-28.226349,longitude:-52.381581}
          };
      }

      $scope.x();

When the page is loaded, the marker is at latitude: -28.226349, longitude: -52.381581.

Entire HTML:

<md-button class="md-raised md-primary" ng-click="x()">Click here to move the marker</md-button>
<div id="map" ng-controller="MapCtrl">
<ui-gmap-google-map center='map.center' zoom='map.zoom'  options="map.options">

<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="6"></ui-gmap-marker>

</ui-gmap-google-map>

Answer 1

Take a look at this codepen here .

It is working as expected. I think the issue is with your idkey. Make the idkey dynamic and bind it to the ID of the marker object.

HTML

<div ng-app="myApp" ng-controller="gMap">
  <md-button class="md-raised md-primary" ng-click="x()">Marker</md-button>
  <ui-gmap-google-map 
    center='map.center' 
    zoom='map.zoom' aria-label="Google map">

    <ui-gmap-marker
      coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
      <ui-gmap-window>
        <div>{{marker.window.title}}</div>
      </ui-gmap-window>
    </ui-gmap-marker>

  </ui-gmap-google-map>
</div>

Controller

myApp.controller("gMap", function($scope) {
  $scope.x = function() {
    console.log('a');
    $scope.marker = {
    id: 6,
    "coords": {
      "latitude": "40.7903",
      "longitude": "-73.9597"
    }
  }
  }
  $scope.marker = {
    id: 6,
    "coords": {
      "latitude": "45.5200",
      "longitude": "-122.6819"
    }
  }
  $scope.map = {
    center: {
      latitude: 39.8282,
      longitude: -98.5795
    },
    zoom: 4
  };
});