如何在jQuery中使角度$ scope属性更新？

Question

目前，我可以通过将代码绑定到名为cities的$ scope属性，使我的代码显示从json文件获取的信息。我通过将其设置为jquery中的数组（称为结果）来完成此操作。第一次显示它是完美的。问题是当我尝试通过选择选项框上的选项来过滤结果时。数组在jquery中得到了更新，但似乎$ scope.cities的值保持不变。理想情况下，每当我在jquery中调用initMap时，$ scope.cities都会被“刷新”。

我认为scope.apply（）是我的问题的解决方案，但它似乎没有帮助。我也听说过使用jquery和angular是一个坏主意。有没有办法在控制器/角度内编写相同的功能来解决这个问题？当我试图在那里写它时，我无法使用谷歌地图api功能。也许我必须将它们作为依赖项注入？

<select name="Min Price" class="custom-select">
  <option>Min Price</option>
  <option>500+</option>
  <option>1750+</option>
  <option>2000+</option>
  <option>2500+</option>
</select>
<div data-ng-repeat="home in cities">
 <div class="results-homes" data-toggle="modal" data-target="#resultsModal">
  <span data-ng-style="{'background-image':'url(' + home.picture + ')'}"></span>
   <div>
    <p>{{home.type}} <span class="pull-right">{{home.beds}} bds/{{home.baths}} ba/{{home.sqft}} sqft</span>
    </p>
    <p>{{home.price}}/mo<span class="pull-right">{{home.address}}</span></p>
   </div>
 </div>
</div>

下面是选择框和应该为结果列表重复的部分。

<script>
$(function () {
    $.ajax({
    type: 'GET',
    url: 'app.json',
    dataType: 'json',
    success: function (data) {
  var minPrice = 0;
  $(".custom-select").on("change", function (e) {
    var target = $(e.target);
    var targetValue = target.val();


    switch (target.attr("name")) {
      case "Min Price":
        if (targetValue !== "Min Price") {

          minPrice = parseFloat(targetValue);

        } else {
          minPrice = 0;
        }
        break;
        }
        initMap();
        });
        function initMap() {
    results = [];
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 45.397,
        lng: -70.644
      },
      zoom: 5
    });


    for (var i = 0; i < data.homes.length; i++) {
      var dataBeds = parseFloat(data.homes[i].beds);
      var dataBaths = parseFloat(data.homes[i].baths);
      var dataPrice = parseFloat(data.homes[i].price);
      var dataSqft = parseFloat(data.homes[i].sqft);
      var lat = data.homes[i].lat;
      var long = data.homes[i].long;
      var address = data.homes[i].address;
      var myLatLng = {
        lat: parseInt(data.homes[i].lat),
        lng: parseInt(data.homes[i].long)
      };


      if (minPrice <= dataPrice) {
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
        results.push(data.homes[i]);

      }
    }
  }
  initMap();
}
});
});
</script>

<script>
var app = angular.module('realEstateApp', []);
app.controller('MainController', ['$scope', "getResults", function ($scope,    getResults) {
 window.setTimeout(function () {
   $scope.cities = results;
   $scope.$apply("cities", results);
  }, 200);
}]);
</script>

这是我的角度代码。

{

"homes": [
 {
  "address": "133 Parker street",
  "type": "apartment",
  "beds": "2",
  "baths": "4",
  "price": "2000",
  "city": "Miami",
  "state": "FL",
  "picture": "http://www.directcommercialfunding.com/images/apartment-building-loans.jpg",
  "sqft": "2000",
  "lat": "49.735495",
  "long": "-73.910745"
 },
 {
  "address": "857 17th street",
  "type": "apartment",
  "beds": "3",
  "baths": "2",
  "price": "800",
  "city": "Dallas",
  "state": "TX",
  "picture":  "http://i2.interiorim.com/uploads/original/201606/27/interiorim.com_future_light_Dream_house_lifestyle_11619.jpg",
  "sqft": "3000",
  "lat": "48.735496",
  "long": "-73.910746"
 }]}

这里是json文件

很抱歉，如果我包含太多代码，我也会对其中的某些部分进行简化，以便于阅读。为了清楚起见，我希望使用var结果更新$ scope.cities。所以如果var results = [1,2,3]，那么$ scope.cities = [1,2,3]。但如果有人要更改选择框以使结果= [4,5,6]，则$ scope.cities也会更改为[4,5,6]。