title: AngularJS, Model and view not in synch after callback, and $apply gives error
body: <p>I am trying to make two controllers comunicate via a service in Angularjs.
  The service 'playerFocus' works fine at the model level, but the view gets not updated. I refer in particular to the variable show inside the ModalDialogController, that turns correctly to true but remains false in the view. Here is the complete js:</p>
  
  <pre><code>(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
  }]);
  </code></pre>
  
  <p>And the html template:</p>
  
  <pre><code>            &lt;!-- players list --&gt;
          &lt;div id="players-list" ng-controller="PlayersListController"&gt;
              &lt;div ng-repeat="player in players"&gt;
  
                  &lt;!-- player --&gt;
                  &lt;div class="player"&gt;    
                      &lt;img class="player-thumb" ng-src="{{player.photo}}"}}&gt;
                      &lt;div class="player-info"&gt;
                          &lt;p&gt;{{player.name}}&lt;/p&gt;
                          &lt;button ng-click="playerDialog(player.id)" type="button" class="btn btn-default player-info-btn"&gt;Info&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;!-- add player --&gt;
              &lt;div class="player"&gt;    
                  &lt;img class="player-thumb" src="images/default.png"}}&gt;
                  &lt;div class="player-info"&gt;
                      &lt;p&gt;- ??? -&lt;/p&gt;
                      &lt;button type="button" class="btn btn-success player-info-btn"&gt;Nuovo Giocatore&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;!-- player modal dialog --&gt;
      &lt;div ng-controller="ModalDialogController"&gt;
          &lt;div class="modal-dialog" ng-show="{{show}}"&gt;
              {{player}}{{show}}
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I searched for a solution the whole day, <a href="https://stackoverflow.com/questions/22881374/why-is-this-simple-angularjs-ng-show-not-working">one</a> being to use $apply to force the sync of model and view after the service callback, but I get this <a href="https://docs.angularjs.org/error/$rootScope/inprog?p0=$apply" rel="nofollow noreferrer">error</a>. I am really confused on this and Angular docs are way too complicated for my level of understanding.</p>