Directive is not updating after updated value is sent from a service - angularjs

Question

I am facing a problem with showing a counter value inside a directive.
I am working on an cart application where I have a header directive which is loading only once, when the app loads. I have list of products with 2 links/buttons for adding in wishlist and adding in cart.
Scenario:
When I am adding a product in wishlist, I am getting that product object from my controller and sending it in a service where I am pushing that object in a service wishlist array. Then I am running a loop to to count the number of objects inside the wishlist array and caching it in a service variable (I am not using $rootScope). I am using another service function to return this updated wishlist array count. Inside the directive I am using this service function to get the updated count.
Problem:
The wishlist array count is updating each time I am adding a product inside the wishlist array. But it is not showing the updated value in the view.

Answer 1

See if you want use service then use its reference variable as below
Jsfiddle link
js Code
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope, myservice) {
$scope.data = myservice.data;
$scope.add = function() {
myservice.add('test');
}
});
app.controller('ctrl2', function($scope, myservice) {
$scope.cart = myservice;
});
app.directive('myDir', function() {
return {
restrict: 'EA',
template: '<span>my dir Count {{cart.data.length}}</span>'
}
});
app.directive('myDir1', function(myservice) {
return {
restrict: 'EA',
template: '<span>my dir1 Count {{data.get().length}}</span>',
scope: {},
link: function(scope) {
scope.data = myservice;
}
}
});
app.service('myservice', function() {
this.data = [];
this.add = function(item) {
this.data.push(item);
};
this.get = function() {
return this.data;
};
return this;
});
HTML code
<div ng-app='myApp'>
<div ng-controller='ctrl'>
CTRL
<button ng-click='add()'>
Add to wishlist
</button>
Data :{{data}}
</div>
<hr>
<div ng-controller='ctrl2'>
Count {{cart.data.length}}
<br> Count {{cart.get().length}}
</div>
</div>
This way you can get service data any where in app