用Angularjs同步Leafletjs的地图数据

我试图创建一个应用程序，需要纬度和经度坐标(连同其他属性)从json文件，并将它们应用到我的地图，过滤器和搜索选项一起。我一直在跟随这个教程:http://zevross.com/blog/2014/05/27/synchronize-leaflet-map-data-with-angularjs/我无法确定我的json文件格式是否正确，或者我是否没有在javascript中迭代文件。谢谢你的帮助。

controllers.js

'use strict';
myApp.controller('DemoController', ["$scope", "$http", '$q', '$filter',
function($scope, $http, $q, $filter) {
    $scope.search = {
        customer: '',
        year: ''
    }
    $scope.tableClick = function(dat){
         $scope.search.customer = dat.customer
    }
       // function countryClick(country, event) {
       //      console.log(country);
       //  }
    $scope.orderByField = 'year';
    $scope.$on("leafletDirectiveMap.geojsonMouseover", function(ev,      
    leafletEvent) {
        customerMouseover(leafletEvent);
    });
   $scope.$on("leafletDirectiveMap.geojsonClick", function(ev,    
   featureSelected, leafletEvent) {
            $scope.search.customer=featureSelected.properties.customer
        });
   $scope.clearSelections = function(){
    $scope.search.customer = ''
    $scope.search.year = ''
   }
    $scope.$watchCollection("search",
        function(newValue, oldValue) {
            if (newValue === oldValue) {
                return;
            }
            var data = angular.copy($scope.acct_year);
            var justGroup = _.filter(data.features, function(x) {
                if (newValue.year == '' || newValue.year == undefined) {
                    if (!newValue.customer) {
                        return true
                    } else {
                        return $filter('filter')([x.properties.customer],   
newValue.customer).length > 0
                    }
                } else {
                    if (!newValue.customer) {
                        return x.properties.year == newValue.year
                    } else {
                        return x.properties.year == newValue.year & $filter('filter')([x.properties.customer], newValue.customer).length > 0
                    }
                }
            })
            data.features = justGroup
            $scope.geojson = {
                data: data,
                style: style,
                resetStyleOnMouseout: true
            }
        }
    );
    angular.extend($scope, {
        center: {
            lat: 40.8471,
            lng: 14.0625,
            zoom: 2
        },
        scrollWheelZoom: false,
        legend: {
            colors: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0', '#f0027f'],
            labels: ['2010', '2011', '2012', '2013', '2014', '2015']
        }
            });

    var opac = 0.8
    var circlecolors = {
        '2010': {
            color: '#7fc97f',
            opacity: opac
        },
        '2011': {
            color: '#beaed4',
            opacity: opac
        },
        '2012': {
            color: '#fdc086',
            opacity: opac
        },
        '2013': {
            color: '#ffff99',
            opacity: opac
        },
        '2014': {
            color: '#386cb0',
            opacity: opac
        },
        '2015': {
            color: '#f0027f',
            opacity: opac
        }
    }
        function getColorFootball(d) {
            return circlecolors[d.year] || {
                color: 'grey',
                opacity: 0
            }
        }

        function style(feature) {
            var vals = getColorFootball($scope.footballObject[feature.properties.ISO3])
            var rads = getRadiusFootball($scope.footballObject[feature.properties.ISO3])
            return {
                fillColor: vals.color,
                radius: rads,
                color: "#000",
                weight: 1,
                opacity: 1,
                fillOpacity: vals.opacity
            };
        }

        function getRadiusFootball(d) {

            if (d) {
                d = d['year']
                return Math.sqrt(1500 / d)
            } else {
                return 0
            }
        }

  $scope.acct_year= [];
   $http.get('acct_year_small.json').success(function(data, status) {
        var tempAcct_Json = {};
        for (var i = 0; i < data.length; i++) {
            var customer = data[i];
            tempAcct_Json[customer['CUSTOMER']] = customer;

        //then set on scope
        $scope.footballObject = tempAcct_Json;
        $scope.acct_year = data;
    }
    });

    // http://thematicmapping.org/downloads/world_borders.php
    // qgis to do centroids, move US, save as geojson
    $scope.acct_yeargeo = {};
    $http.get("world.geojson").success(function(data, status) {
        //data.features = data.sort(propSort(["PARK_NAME"]));
        var featuresLim = []
        var minrank = 0
        for (var i = 0; i < data.features.length; i++) {
            var amatch = _.where($scope.acct_year, {
                "alpha-3": data.features[i].properties['ISO3']
            })
            if (amatch.length > 0) {
                var feat = data.features[i]
                var currank = amatch[0]['year']

                var curgroup = amatch[0]['year']
                var curcountry = amatch[0]['customer']
                feat.properties['year'] = currank
                feat.properties['year'] = curgroup
                feat.properties['customer'] = curcountry
                featuresLim.push(feat)

            } //end if

        } //end loop through features
        featuresLim.sort(propSort("year"));
        //featuresLim.sort(sortBy)
        data.features = featuresLim

        $scope.acct_yeargeo = data
        angular.extend($scope, {
            geojson: {
                data: data,
                style: style,
                resetStyleOnMouseout: true
            }
        }); //end extend
    }); //end get features

    function countryMouseover(leafletEvent) {
        var layer = leafletEvent.target;
        layer.setStyle({
            weight: 2,
            color: '#666',
            fillColor: 'white'
        });
        //layer.bringToFront();
    }

    function propSort(props) {
        return function sort(a, b) {
            var p;
            a = a.properties;
            b = b.properties;
            p = props;
            if (a[p] < b[p]) return -1;
            if (a[p] > b[p]) return 1;
        };
    }


}
]);
//mapoptions
myApp.controller("GoogleMapsController", ["$scope",
function($scope) {
    angular.extend($scope, {
        world: {
            lat: 39.809860,
            lng: -98.555183,
            zoom: 4
        },
        scrollwheel: false,
        layers: {
            baselayers: {
                googleTerrain: {
                    name: 'Google Terrain',
                    layerType: 'TERRAIN',
                    type: 'google'
                }

            }
        },
        defaults: {
            scrollwheel: false
        }
        });
    }
    ]);

test2.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Map</title>
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/leaflet.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"   
href="http://cloud.github.com/downloads/lafeber/world-flags- 
sprite/flags32.css" />
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"> 
</script>
<script 
src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-
min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" 
rel="stylesheet">
<link rel="stylesheet" href="../css/app.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
</head>
<body ng-controller="DemoController">

<div class="container">
    <div class="row">
        <h1>Map</h1>


    </div>
    <div class="row">
        <div ng-controller='GoogleMapsController'>
            <!-- <leaflet center="center" events="events" legend="legend"  
    geojson="geojson" width='100%' height='600'></leaflet> -->
            <leaflet center="world" events="events" legend="legend"   
    width='100%' height='400' layers='layers' geojson="geojson"></leaflet>

        </div>


        <div class="info country f32">
            <div ng-show="geojson.selected" class="flag" ng- 
            class="geojson.selected.properties.ISO2|lowercase"></div>
            <span class='countryselected' ng-cloak>{{ 
          geojson.selected.properties.NAME ?
          geojson.selected.properties.NAME + ' &#8212; Years ' +   
          footballObject[geojson.selected.properties.ISO3].year : 'Select   
          customer on map'}}</span>
        </div>

        <!--     <div class="info box">Map center: [ lat: {{ center.lat |  
       number:4 }}, lng: {{ center.lng | number:4 }} ]</div> -->

        <div class="col-md-10 col-md-offset-1">
            <div class="row well filtering">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="search" class="col-sm-6 control- 
                         label">Filter by Customer</label>
                        <input ng-model="search.country">
                    </div>
                    <div class="form-group">
                        <label class="col-sm-6 control-label">Filter by  
                        Year</label>
                        <select class="selectpicker" ng-model='search.Group'  
 ng-options="city.Group as city.Group for city in acct_year | unique:'year'  
 | orderBy:'year'" fix>
 <option value="" selected="selected">-- All Years --</option>
                        </select>
    </div>
     <div class="form-group">
            <button type="button" class="btn btn-grey col-sm-2 col-sm-  
              offset-5" ng-click='clearSelections()'>Clear  
 Selections</button>
                    </div>
                </form>
            </div>
            <div class="row">
                <table ng-cloak class='table table-striped full'>
                    <thead>
                        <tr class="foot">
                            <th><a href="" ng-click="orderByField =  
      'customer'; reverse=!reverse">Customer</a>
                            </th>
                            <th><a href="" ng-click="orderByField = 
      'cust_code'; reverse=!reverse">Customer Code</a>
                            </th>
                            <th><a href="" ng-click="orderByField = 'grand 
       total'; reverse=!reverse">Grand Total</a>
                            </th>
                            <th><a href="" ng-click="orderByField = 'year'; 
       reverse=!reverse">Year</a>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="foot in acct_year | 
                       orderBy:orderByField:reverse | filter:search" ng-  
                            click="tableClick(foot)">
                            <td class='country'>{{foot.customer}}</td>
                            <td>{{foot.cust_code}}</td>
                            <td>{{foot.grand_total}}</td>
                            <td>{{foot.year}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
<hr>
        <footer>
</footer>
</div>
</body>
<script>
</script>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-route.js"></script>
<script src="../js/angular-leaflet-directive.js"></script>
<script src="../js/app.js"></script>
<script src="../js/controllers.js"></script>
<script src="../js/directives.js"></script>
<script src="../js/filters.js"></script>
<script src="../js/Google.js"></script>
</body>

acct_year_small。Json(只是一个测试文件，实际文件有更多的数据)

features = 
[
  {
   "type": "Feature",
   "geometry": {
   "type": "Point",
   "coordinates":  [ -102.852,30.877528 ]
  },
   "properties": {
   "CUSTOMER":"Bridgestone Americas Tire Operations",
   "CUST_CODE":20,
   "GRAND TOTAL":"$11,311.82",
   "YEAR":2010
    }
  },
{
"type": "Feature",
"geometry": {
   "type": "Point",
   "coordinates":  [ -76.41533,39.337798 ]
},
"properties": {
"CUSTOMER":"D & M Equipment",
"CUST_CODE":47,
"GRAND TOTAL":"$4,500.00",
"YEAR":2010
 }
}
];