Changes in $http data from 1 controller to affect another in AngularJS? - angularjs

Question

So if my data is coming from a json $http, how do i make it so that if i click vote on one controller, it will sort the order by votes on another controller?
What I have so far isnt working correctly and it seems like the shared data does catches any changes between controller... take it look
app.controller('voteController', function ($scope, musicData) {
musicData.getMusic().then(function(data){
$scope.music = data.data;
});
$scope.upVote = function(music) {
music.likes++;
};
$scope.downVote = function(music) {
music.dislikes--;
};
});
// controller for top 5 charts
app.controller('topFiveController', function ($scope, musicData) {
musicData.getMusic().then(function(data){
$scope.music = data.data;
});
$scope.sortorder = '-likes';
});
// factory to share data between controllers
app.factory('musicData', function($http) {
var factory = {};
factory.getMusic = function() {
return $http.get('app/data/music.json');
};
return factory;
});
and this is what I have in the mark up
<div id="topMusic" ng-controller="topFiveController" ng-model="sortorder">
<h3 class="title"><i class="fa fa-hand-o-right"></i> Top 5 titles</h3>
<ul>
<li ng-repeat="music in music.music | orderBy:sortorder | limitTo: 5">
{{music.artist}} - "{{music.title}}"
</li>
</ul>
</div>
<div id="voteMusic" ng-controller="voteController">
<h1>Vote here</h1>
<ul>
<li class="likeMe" ng-click="upVote(music)">
<i class= "fa fa-thumbs-up" ></i> like - {{music.likes}}</li>
<li class="dislikeMe" ng-click="downVote(musics)">
<i class="fa fa-thumbs-down"></i>dislikes -
{{music.dislikes}}</li>
</ul>
</div>
this is how the json file looks like
{"music": [
{
"artist": "Artst 1",
"title": "title one",
"likes": 10,
"dislikes": 1
},
{
"artist": "Artst 2",
"title": "title 2",
"likes": 5,
"dislikes": 1
},
{
"artist": "Artst 3",
"title": "title 3",
"likes": 3,
"dislikes": 1
},
{
"artist": "Artst 4",
"title": "title 4",
"likes": 2,
"dislikes": 1
},
{
"artist": "Artst 5",
"title": "title 5",
"likes": 1,
"dislikes": 1
}
]
}

Answer 1

From the looks of it, you will actually need to use $rootScope.$broadcast instead of $scope.$emit, as sma suggested. As you have your markup, voteController is not actually a child of topFiveController. In your voteController, you will need to inject $rootScope as a dependency, and then use:
$rootScope.$broadcast('vote');
and in topFiveController:
$scope.$on('vote', function () {
// sort
});
If you want to update the music object in topFiveController to show the new vote without having to get from the music service again, you can also do this in your voteController:
$rootScope.$broadcast('vote', $scope.music);
then do this in your topFiveController:
$scope.$on('vote', function(music) {
$scope.music = music;
// sort
});

Answer 2

You can emit an event from your voteController:
$scope.$emit("vote");
and then listen for that event in your topFiveController:
$scope.$on("vote", function () {
// sort
});
I am using $emit because that will send events up the $scope inheritance tree. According to your markup, it looks like voteController is a child scope of topFiveController. If they are sibling scopes or if the topFiveController is a child scope of voteController, then use $scope.$broadcast instead of $emit. $broadcast sends events down the inheritance tree.