AngularJs, ngRepeat not working

Question

I am using AngularJs. I am displaying google maps with markers. After clicking marker I am displaying clicked marker details.

Here is my Controller.js

  function createMarker(latitude,longitude,name,address,locationId,sid){
      var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.maps.LatLng(latitude,longitude),
        title: name
        });
       $scope.leadsForMap=[];
       $scope.location={};
       google.maps.event.addListener(marker, 'click', function() {
       $scope.location = {
                name: name,
                sid: sid,
                address: address,
                locationId:locationId
                };
       $scope.leadsForMap.push($scope.location);
       $scope.markers.push(marker);
   }

In html I am trying to loop $scope.leadsForMap array and display particular details after click like this

html

    <div  data-ng-repeat="location in leadsForMap track by $index" data-ng-
    if="leadsForMap.length>0">
    {{$index+1}} {{location.name}} - {{location.sid}},{{location.address}}
    </div>   

But this div is not at all displaying even if $scope.leadsForMap has value. Can anyone tell where it is wrong?

Answer 1

You need to use

$scope.$apply()

One has to use $scope.$apply when event is out of scope of angular and angular will not run digest cycle as it is out of scope.

You need to run the digest cycle which is going to run manually by $scope.$apply()

 google.maps.event.addListener(marker, 'click', function() { $scope.location = { name: name, sid: sid, address: address, locationId:locationId }; $scope.leadsForMap.push($scope.location); $scope.markers.push(marker); $scope.$apply(); } 

Check When to use $scope.$apply()