地図マーカーとブートストラップのリスト

Question

私の要件は、Googleマップ上の特定のマーカーをクリックすると、その場所がブートストラップのリストで更新される必要があります。しかし、私がクリックすると、配列は更新されますが、リストはブートストラップで更新されません。私はinfowindowを使用してすべてが働いた。

HTML

<div class="panel-body"> 
    <ul style="padding-left:0px;"> 
     <li class="list-group-item list-group-item-info" ng-repeat="x in routesub" style="font-size:smaller;"> 
      <span class="badge" ng-click="delloc(x)">x</span> 
       {{x}} 
     </li> 
    </ul> 
    <button class="btn btn-danger btn-sm" ng-click="subsearch()">SUBSCRIBE</button> 
</div> 

app.js

google.maps.event.addListener(marker, 'click', (function (marker, i) { 
    return function() { 

        // var content1 = "<div><h6><font color='black'>" + locations[i].Name + "</font></h6><input type = 'button' class = 'btn btn-success btn-sm' value = 'Select' ng-click = 'SubLoc();' /></div>"; 
        //var content = $compile(content1)($scope); 
        //$scope.infowindow.setContent(content[0]); 
        //$scope.infowindow.open($scope.map, marker); 
        $scope.SubLoc = function() { 
         if ($scope.routesub.indexOf(locations[i].Name) == -1) { 
          $scope.routesub.push(locations[i].Name); 
          $scope.routeidsub1.push(locations[i].LocationId); 
          marker.setIcon(icon_sel); 
          // $scope.infowindow.close(); 
         } 
         else { 
          //$scope.infowindow.close(); 
         } 
        } 
        $scope.SubLoc(); 

       } 
      })(marker, i)); 

私はそれらのコメントの部分をコメント解除し、perfecftly働い情報ウィンドウのすべてを使用する場合。私がマーカーをクリックしたときのコメント後、データは$scope.routesubに保存されていますが、htmlでは表示されません。ヘルプメー

Answer 1

Googleイベントリスナーの「角度の世界」から外れるので、バインドされた値をリフレッシュするためのダイジェストサイクル。

ラップあなたがこのような$apply関数に更新したい値：

$scope.$apply(function(){ 
    $scope.routesub.push(locations[i].Name); 
}); 

それは何のエラー「が既に実行されているダイジェスト」を生成しないので、代わりにあなたも（私の好ましい方法）$timeoutを使用することができます。

を

$timeout(function(){ 
    $scope.routesub.push(locations[i].Name); 
});