绑定到AngularJS服务属性

Question

我有一个网页，它使用自定义服务来管理View（OpenLayers）上的地图。我希望能够在页面上显示有关不同标记的信息，这意味着绑定到服务属性。该服务是从自定义指令调用的，绑定（据我所知）应该从Controller完成。此时显示的数据是初始化对象，而不是绑定到该对象的任何更改。

main.html

<h2>My Map</h2>
<div id="map" class="map"></div>
<p>
    Name: {{selected.name}}</br>
    Routers: {{selected.routers}}</br>
    Switches: {{selected.switches}}
</p>

main.ctrl.js

angular.module("app").controller("MainController", function($scope, openlayers){
    openlayers.init();
    $scope.selected = openlayers.selected;
});

openlayers.js

angular.module("app").factory("openlayers", function(){

    var init = function(){
        var vectorLayers = [new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'osm'})
        })];
        vectorLayers.push(createMapLayer("red"));
        vectorLayers.push(createMapLayer("orange"));
        vectorLayers.push(createMapLayer("blue"));

        setUpMap(vectorLayers);
    };

    var activeVector = {
            name: null,
            routers: null,
            switches: null
    };

    function createMapLayer(markerColor){
        var vectorSource = getVectorSource();

        //add the feature vector to the layer vector, and apply a style to whole layer
        var vectorLayer = new ol.layer.Vector({
          source: getVectorSource(cities[markerColor]),
          style: getIconStyle(markerColor)
        });

        return vectorLayer;
    }

    function getVectorSource(cities){

        var vectorSource = new ol.source.Vector({
              //create empty vector
            });

        //create a bunch of icons and add to source vector
        for (var index in cities){
            var city = cities[index];

            var iconFeature = new ol.Feature({
                geometry: new  ol.geom.Point(
                    ol.proj.transform(
                            [city.lon, city.lat], 
                            'EPSG:4326',   
                            'EPSG:3857'
                )),
                name: city.name,
                routers: 200,
                switches: 100
            });

            vectorSource.addFeature(iconFeature);
        }

        return vectorSource;
    }

    function getIconStyle(markerColor){

        //create the style
        return new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            opacity: 0.75,
            src: "Images/"+markerColor+"-marker.png"
          }))
        });
    }

    function setUpMap(vectorLayers){

        var map = new ol.Map({
           target: 'map',
           layers: vectorLayers,
           view: new ol.View({
             center: ol.proj.fromLonLat([2.808981, 46.609599]),
             zoom: 4
           })
         });

        addClickEventsToMapItems(map);

    }

    function addClickEventsToMapItems(map){

        var interaction = new ol.interaction.Select({
            condition: ol.events.condition.click
        });

        map.addInteraction(interaction);

        interaction.on("select", function(e){
            activeVector.name = e.target.getFeatures().item(0).get("name");
            activeVector.routers = e.target.getFeatures().item(0).get("routers");
            activeVector.switches = e.target.getFeatures().item(0).get("switches");
        });
    }

    return {
        init: init,
        selected: activeVector
    };

});

var red_cities = [
            { "lat": 40.462663, "lon": -3.626368, "name": "madrid" },
            { "lat": 53.381129, "lon": -1.470085, "name": "sheffield" },
            { "lat": 48.856614, "lon": 2.352222, "name": "paris" }
        ];

var orange_cities = [
            { "lat": 53.480759, "lon": -2.242631, "name": "manchester" },
            { "lat": 53.551085, "lon": 9.993682, "name": "hamburg" },
            { "lat": 50.850340, "lon": 4.351710, "name": "brussels" }
        ];

var blue_cities = [
            { "lat": 43.552847, "lon": 7.017369, "name": "cannes" },
            { "lat": 51.507351, "lon": -0.127758, "name": "london" },
            { "lat": 52.370216, "lon": 4.895168, "name": "amsterdam" },
            { "lat": 36.140751, "lon": -5.353585, "name": "gibraltar" }
        ];

var cities = {
        red: red_cities,
        orange: orange_cities,
        blue: blue_cities
};

编辑：删除了指令以简化代码。