Change nav-bar side menu content dynamically


#1

I want to use the {{ some $scope var}} inside the nav-bar of a side menu.
I’ve already tried, but it does now refresh automatically … any thoughts?

    $scope.contAcertos = 0,
      $scope.contErros = 0;

    $scope.contAcertos++;
    $scope.contAcertos++;
    $scope.contAcertos++;

//should show 3 but ... 

//should show 3 but …

Image

The green number is the amout of rights ($scope.contAcertos).

sidemenu.html

      <ion-side-menu-content>
          <ion-nav-bar class="bar-positive">
            <ion-nav-buttons side="primary">
              <button class="button button-placar">
            <span class="acertos">{{contAcertos}}</span>
            </button> &nbsp;&nbsp;&nbsp;
              <button class="button button-placar">
            <span class="erros">{{contErros}}</span>
            </button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <!-- HACK centralizar -->
              <button class="button button-clear"> {{temaNome}}</button>
            </ion-nav-buttons>

            <ion-nav-buttons side="right">

              <button id="counter" class="button button-counter ">
                  {{counter}}
                </button>
              <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
                  </button>
            </ion-nav-buttons>
          </ion-nav-bar>

          <ion-nav-view name="game"></ion-nav-view>
        </ion-side-menu-content>

app.js

  .state('sidemenu', {
      url: "/sidemenu",
      abstract: true,
      templateUrl: "templates/sidemenu.html"
      // controller: 'appCtrl'
    })
    .state('sidemenu.game', {
      url: '/game',
      views: {
        'game': {
          templateUrl: 'templates/game.html',
          controller: 'appCtrl'
        }
      }
    });

EDIT1

I tried :
sidemenu navbar

        <span class="acertos">{{placar.acertos}}</span>
        </button> &nbsp;&nbsp;&nbsp;
          <button class="button button-placar">
        <span class="erros">{{placar.erros}}</span>

controllers.js
$scope.attPlacar($scope.contAcertos, $scope.contErros);

app.js

  $rootScope.placar = {
    acertos: 0,
    erros: 0
  };
  $rootScope.attPlacar = function (acertos, erros) {
    $rootScope.placar = {
      acertos: acertos,
      erros: erros
    };
  };

But it only updates with a delay, two times before the last update