AngularJs - service does not update controller - angularjs

Question

I am trying to implement this simple Plunker with no success.
I have a simple service (factory) :
(function () {
'use strict';
angular
.module('app.core')
.factory('PropertiesService', PropertiesService);
function PropertiesService() {
var sefl = this;
self.name = 'Properties Service'
self.properties = {};
self.setProperties = function (prop)
{
self.properties = prop;
}
return self;
}
})();
I am calling this service from a directive :
var prop = { 'top': top, 'left': left, 'position': position };
service.setProperties(prop);
The contoller being updated is :
(function () {
'use strict';
angular
.module('app.properties')
.controller('Properties', Properties);
Properties.$inject = ['PropertiesService'];
function Properties(PropertiesService) {
var vm = this;
vm.collection = {};
setCollection();
function setCollection() {
for (var key in PropertiesService.properties) {
if (PropertiesService.properties.hasOwnProperty(key)) {
vm.collection[key] = PropertiesService.properties[key];
}
}
};
}
})();
Lastly , I am showing the data in html like this :
<div ng-controller="Properties as vm">
<ul class="list-group">
<li class="list-group-item" ng-repeat="(key, value) in vm.collection">
<span>{{key}}</span> : <span>{{value}}</span>
</li>
</ul>
</div>
I understand why i'm getting result only on initialization but I can not find the way to solve it,to make the controller updated when the service is changed (and it does) .
Thanks

Answer 1

Just to note something.
In your plunker you use a service and you try the same code with a factory. This cannot work. there are some differences between the two providers.
Either you use a factory:
function PropertiesFactory() {
// facory doens't get invoked with the new keyword
// so there is no this
var self = {};
self.name = 'Properties Factory'
self.properties = {};
self.setProperties = function (prop)
{
self.properties = prop;
}
return self;
}
or a service:
function PropertiesService() {
var sefl = this;
self.name = 'Properties Service'
self.properties = {};
self.setProperties = function (prop)
{
self.properties = prop;
}
// there is no need for return
// since th service gets invoked with the new keyword
}
form the angularjs docs about providers:
The Service recipe produces a service just like the Value or Factory
recipes, but it does so by invoking a constructor with the new
operator. The constructor can take zero or more arguments, which
represent dependencies needed by the instance of this type.

Answer 2

As it turn out i was hiding an important part of the code , not deliberately but from lack of understanding.
My directive is listening on DOM events and acting upon their changed data.
After reading this article (and help from my CTO...) I understood i needed to manually call $scope.$apply().
Now I have an element i can resize,drag etc. and have its changed properties eflect on the screen.
Now the binding is working again I can revert the controller code to look like this:
function Properties(PropertiesService) {
var vm = this;
vm.collection = PropertiesService.data;
}
Everything is in sync.
Sorry for the partial data , and thanks for the help.
Gilad