javascript - AngularJS, Model and view not in synch after callback, and $apply gives error -

javascript - AngularJS, Model and view not in synch after callback, and $apply gives error -

i trying create 2 controllers comunicate via service in angularjs. service 'playerfocus' works fine @ model level, view gets not updated. refer in particular variable show within modaldialogcontroller, turns correctly true remains false in view. here finish js:

(function(){ var players = [ { id: 1, name: 'charles foley', photo: 'images/gem-01.gif' }, { id: 2, name: 'pippo', photo: 'images/gem-02.gif' }, { id: 3, name: 'roberto', photo: 'images/gem-03.gif' } ]; var app = angular.module('soccer-match', []); app.service('playerfocus', function(){ var subscriber = undefined; this.sendmessage = function(mex){ subscriber(mex); }; this.onmessage = function(callback){ subscriber = callback; }; }); app.controller('playerslistcontroller', ['$scope', 'playerfocus', function($scope, playerfocus){ $scope.players = players; $scope.playerdialog = function(p){ playerfocus.sendmessage(p); }; }]); app.controller('modaldialogcontroller', ['$scope', 'playerfocus', function($scope, playerfocus){ $scope.player = undefined; $scope.show = false; $scope.focusplayer = function(p) { for(i in players){ if(players[i].id == p){ // problem here $scope.$apply( function(){ $scope.player = players[i]; $scope.show = true; }); } } }; playerfocus.onmessage($scope.focusplayer); // problem here }]);

and html template:

<!-- players list --> <div id="players-list" ng-controller="playerslistcontroller"> <div ng-repeat="player in players"> <!-- player --> <div class="player"> <img class="player-thumb" ng-src="{{player.photo}}"}}> <div class="player-info"> <p>{{player.name}}</p> <button ng-click="playerdialog(player.id)" type="button" class="btn btn-default player-info-btn">info</button> </div> </div> </div> <!-- add together player --> <div class="player"> <img class="player-thumb" src="images/default.png"}}> <div class="player-info"> <p>- ??? -</p> <button type="button" class="btn btn-success player-info-btn">nuovo giocatore</button> </div> </div> </div> </div> <!-- player modal dialog --> <div ng-controller="modaldialogcontroller"> <div class="modal-dialog" ng-show="{{show}}"> {{player}}{{show}} </div> </div>

i searched solution whole day, one beingness utilize $apply forcefulness sync of model , view after service callback, error. confused on , angular docs way complicated level of understanding.

i think can refactor utilize service two-way databinding (no $apply), looks complicated in code

http://plnkr.co/edit/pt2xwlyqvy3r840thj92?p=info

javascript angularjs controller apply