I want to display feature properties that have been selected in an OpenLayers3 map. I am using AngularJS and try to update the currently selected feature properties using `$scope$watch`.

I have a MapManager file that is used to handle all necessary OL3 operations:

    // DEFAULT variables
    var defaultCenter = [-2.15, 52.267];
    var defaultZoom = 12;
    var epsgWGS84 = 'EPSG:4326';
    var epsgDefaultMapOL = 'EPSG:3857';
    var defaultTarget = 'map';
    
    // Constructor
    function MapManager(target, center, zoom){
    	// check if parameters are set - use defaults otherwise
    	if(!target){
    		target = defaultTarget;
    	}
    	if(!center){
    		center = defaultCenter;
    	}
    	if(!zoom){
    		zoom = defaultZoom;
    	}
    	this.map = this.initMap(target, center, zoom);
    	this.selectedFeature = null;
    }
    
    
    // Getter
    MapManager.prototype.getSelectedFeature = function(){
        return this.selectedFeature;
    };
    
    // get feature properties from selected feature (filtered properties - e.g. no geometry)
    MapManager.prototype.getSelectedFeatureProperties = function(){
    	//var displayProperties = [];
    	var displayProperties = {};
    	if(this.getSelectedFeature() != null){
    		$.each(this.getSelectedFeature().getProperties(), function(key, value) {
    			// skip the geometry property
    			if(key != "geometry"){
    				displayProperties[key] = value;
    			}
    		});
    	}
    	return displayProperties;
    }
    
    // Setter
    MapManager.prototype.setSelectedFeature = function(feature){
        this.selectedFeature = feature;
    };
    
    // Geojson with lines
    var geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
            'type': 'name',
            'properties': {
                'name': 'EPSG:4326'
            }
        },
        'features': [
            {
                'type': 'Feature',
                'properties': {
                	'prop1': 'feature1',
    				'prop2': 'Blub'
                },
                'geometry': {
                    'type': 'LineString',
                    'coordinates': [
                        [-2.176, 52.266], [-2.166, 52.276]
                    ]
                }
            },
            {
                'type': 'Feature',
                'properties': {
                	'prop1': 'feature2',
    				'prop2': 'Test'
                },
                'geometry': {
                    'type': 'LineString',
                    'coordinates': [
                        [-2.132, 52.272], [-2.145, 52.258]
                    ]
                }
            }
        ]
    };
    
    // create vector source with geojson
    var vectorSource = new ol.source.Vector({
    	features: (new ol.format.GeoJSON()).readFeatures(geojsonObject, {
    		dataProjection: 'EPSG:4326',
    		featureProjection: 'EPSG:3857'
    	})
    });
    
    
    // ### Create layers
    // create osm layer
    function createLayerWebOSM(){
    	return new ol.layer.Tile({
            source: new ol.source.OSM(),
    		projection: epsgDefaultMapOL
    	});
    }
    
    // create vector layer (using geojson vector source)
    var vectorLayer = new ol.layer.Vector({
    	source: vectorSource
    });
    
    
    // Initialize map
    MapManager.prototype.initMap = function(target, center, zoom){
    	this_ = this;
    	var map = new ol.Map({
    		target: target,
    		layers: [createLayerWebOSM(), vectorLayer],
    		view: new ol.View({
    		center: ol.proj.transform(center, epsgWGS84, epsgDefaultMapOL),
    		zoom: zoom
    	  })
    	});
    	
    	// make vector layer selectable
    	vectorLayer.set('selectable', true);
    	
    	map.addInteraction(new ol.interaction.Select({
    		layers: function(layer) {
    			return layer.get("selectable") == true;
    		}
    	}));
    	
    	
    	// add click interaction
    	map.on("click", function(e) {
    		map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
    			this_.setSelectedFeature(feature);
    		});
    	});
    	return map;
    }


When a feature is clicked on the map it is stored and can be accessed with an according getter which is watched in the Angular controller:

    var app = angular.module('myApp', []);
    
    // Controller
    app.controller('appController', function($scope, $q){
    	$scope.mapManager = new MapManager();
    	$scope.selectedFeatureProperties = {};
    	
    	// watch if the selected feature changes
    	$scope.$watch(function($scope) {
    		//return $scope.mapManager.getSelectedFeatureProperties();
            return $scope.mapManager.getSelectedFeature();
    	},
    	function(newFeature, oldFeature, $scope) {
    		console.log("change detected...");
    		$scope.selectedFeatureProperties = $scope.mapManager.getSelectedFeatureProperties();
    	}, true);
    	
    });



I want to display the properties of the currently selected feature in a table:


    <div id="main" data-ng-controller="appController">
    	<!-- table with selected feature inforamtion -->
    	<h4> Selected Feature Properties </h4>
    	<table>
    		<tr>
    			<th> Property </th>
    			<th> Value </th>
    		</tr>
    		<tr ng-repeat="(property, value) in selectedFeatureProperties">
    			<td>{{ property }}</td>
    			<td>{{ value }}</td>
    		</tr>
        </table>
    		
    	<div id='map'></div>
    </div>

It seems that the change is ignored.

You can see the essential part of the code at this [JSFiddle][1]. Some logs indicate that the selectedFeature variable is actually changing...

What am I doing wrong? Is there an easier way to do this (instead of using `$scope$watch`)?


  [1]: https://jsfiddle.net/Lars_fiddle/umsv1860/9/