Angularjs and google map, setting a scope variable a value from the map on click

Question

I think this is a problem in angularjs and not specifically in wrong usage of a google map directive.

I have a map markup using a directive like so.

<map>
   <marker on-click="setSelected(e,item)"></marker>
</map>

and in my controller

$scope.selectedItem = {};
$scope.setSelected = function(e,item){
 $scope.selectedItem = item;
 // console.log($scope.selectedItem)
}

When I log the selectedItem, I am getting the expected result, but when I try to use the variable in a template, it just don't work at all like so

<p>{{selectedItem}}</p>

What do you think is the mistake here.

LordTribual · Accepted Answer · 2014-05-13 19:31:05Z

3

Wrap everything within the function setSelected around an AngularJS $apply like so:

$scope.setSelected = function(e,item){
    $scope.$apply(function () {
        $scope.selectedItem = item;
    });
}

answered May 13, 2014 at 19:31

LordTribual

4,2492 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1