Identical function using ng-show works to load one controller in Angular JS, but not the another one

Question

I'm creating a page using Angular which has three controllers. They are loaded using ng-show directive. Each controller has a button with ng-click which calls a function. The function is simple it hides one controller and makes the next one visible.

The problem: this function works for one controller, but for some reason it doesn't work for the other one. Precisely, levelsView controller is loaded, but cardsView is not. CardsView becomes visible if I set ng-show to true in HTML page, but not through the function. I've spent a few days trying to find the problem and I can't, please help me to solve this "mystery".

HTML page:

  <main>
    <div class="bottom-container">
      <div ng-controller="rulesCtrl as rulesView" ng-hide="rulesView.gameMetrics.levelsActive || rulesView.gameMetrics.cardsActive"
           class="rules">
        <p><span class="bold large-text">Rules: </span>Find a pair for the HTML opening and closing tag or match CSS value with a property within given time. <button class="link-button" data="#rulesHide">Read more...</button></p>
        <div class="rules-details" id="rulesHide">
          <p><span class="bold large-text">HTML: </span>For HTML a pair would be <span class="bold">&lt;div&gt; + &lt;/div&gt;</span>.</p>
          <p><span class="bold large-text">CSS: </span>For CSS an example could be the property <span class="bold">display</span>. It has values: <span class="bold">block, inline, inline-block </span>etc. A pair would be <span class="bold">display + block.</span></p>
          <p>The main challange is to find the pairs fast. The harder the level the shorter will be the time given.</p>
        </div>
        <button class="button btn-start" ng-click="rulesView.showLevels()">Start</button>
      </div>

    <div ng-controller="levelsCtrl as levelsView" ng-show="levelsView.gameMetrics.levelsActive" class="levels">
      <h2>Select Level:</h2>
        <button class="button btn-easy" ng-click="levelsView.showCards()">Easy</button>
        <button class="button btn-medium">Medium</button>
        <button class="button btn-hard">Hard</button>
    </div>
    <div ng-controller="cardsCtrl as cardsView" ng-show="cardsView.gameMetrics.cardsActive" class="game-field">
      <h2>Find the tag pairs on time.</h2>
        <span class="fa fa-clock-o fa-lg"></span>
        <span class="game-timer">{{ cardsView.timeLeft }}</span>
        <span class="game-timer-msg">{{ cardsView.timesUp }}</span>
      <div class="flex-container">
        <div class="flex-item"
             ng-repeat="cardsData in cardsView.data">
          {{ cardsData.text }}
        </div>
        </div>
    </div>
</div>
  </main>

Factory with data:

(function(){
  angular
    .module("syntaxPairing")
    .factory("gameMetrics", GameMetrics);

    GameMetrics.$inject = ["DataService"];

    function GameMetrics(DataService){
      var gameObject = {
            rulesActive: true,
            levelsActive: false,
            cardsActive: false,
            changeVisibility: changeVisibility
      };

      return gameObject;

      function changeVisibility(metric, state){
        if(metric === "rulesView"){
          gameObject.rulesActive = state;
        }else if(metric === "levelsView"){
          gameObject.levelsActive = state;
        }else if(metric === "cardsView"){
          gameObject.cardsActive = state;
        }
          return false;
        }

    }
})();

First controller (rulesView.js):

(function(){
  angular
    .module("syntaxPairing")
    .controller("rulesCtrl", RulesController);

    RulesController.$inject = ["gameMetrics", "DataService"];

    function RulesController(gameMetrics){

      var vm = this;

      vm.gameMetrics = gameMetrics;
      vm.showLevels = showLevels;

      function showLevels(){
        gameMetrics.changeVisibility("rulesView", false);
        gameMetrics.changeVisibility("levelsView", true);
      }
    }

})();

Second controller (levelsView.js):

(function(){
  angular
    .module("syntaxPairing")
    .controller("levelsCtrl", LevelsController);

    LevelsController.$inject = ["gameMetrics", "DataService"];

    function LevelsController(gameMetrics){

      var vm = this;

      vm.gameMetrics = gameMetrics;
      vm.showCards = showCards;

      function showCards(){
        gameMetrics.changeVisibility("levelsView", false);
        gameMetrics.changeVisibility("rulesView", false);
        gameMetrics.changeVisibility("cardsView", true);
      }

    }

})();

Third controller (cardsView.js):

(function(){
  angular
    .module("syntaxPairing")
    .controller("cardsCtrl", CardsController);

    CardsController.$inject = ["gameMetrics", "DataService", "$timeout"];

    function CardsController(gameMetrics, DataService, $timeout){
      var vm = this;

      vm.data = DataService.cardsData;
      vm.timeLeft = 5;
      vm.onTimeout = onTimeout;


      function onTimeout(){
        vm.timeLeft--;
        if(vm.timeLeft > 0){
         mytimeout = $timeout(onTimeout, 1000);
        }else{
          vm.timesUp = "The time is up!";
        }
      }
      var mytimeout = $timeout(onTimeout, 1000);

    }

})();

DataService:

(function(){
  angular
    .module("syntaxPairing")
    .factory("DataService", DataFactory);

    function DataFactory(){
      var dataObject = {
        cardsData: cardsData
      };
      return dataObject;
    }

    var cardsData = [
      {
        type: "text",
        text: "<html>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</html>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "<header>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</header>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "<body>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</body>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "<p>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</p>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "<script>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</script>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "<span>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</span>",
        selected: null,
        correct: null
      }
    ]

})();

Answer 1

In third controller i.e. cardsCtrl, you are missing gameMetrics. So cardsView.gameMetrics.cardsActive is not changed.

Just add the below line, it works perfectly.

vm.gameMetrics = gameMetrics; 

http://jsbin.com/zeredah/edit?html,js,output