Bind to AngularJS Service property - angularjs

Question

I have a web page which uses a custom service to manage a map on the View (OpenLayers). I want to be able to display information about different markers on the page somewhere which means binding to a service property. The service is being called from a custom directive, and the binding (as far as I know) should be done from the Controller. The data being shown at the moment is the initialised object rather than binding to any changes to that object.
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
};
EDIT: Removed the directive to simplify the code.