In angular, why are my ng-shows not updating to reflect the current scope?

Question

I have an ng-show inside of an ng-repeat inside of another ng-repeat. There is a button inside of that ng-show. When I click the button, my scope is updated correctly, but the ng-show does not change until I refresh the page.

template:

<div ng-repeat="quest in quests">
  <p ng-show="{{quest.progress === 0}}">You and goat have found a castle.</p>
  <p ng-repeat="step in quest._steps">
  <span ng-show="{{quest.progress === step.order}}">You are here</span>
  <span ng-show="{{quest.progress + 1 === step.order}}">Goat Says: {{step.flavorText}} {{step.description}}<button ng-click="nextStep(quest)">Step Complete!</button>    
</span>
</p>

controller:

$scope.nextStep = function(currentQuest, i) {
  currentQuest.progress++;
  console.log('$scope.quests', $scope.quests);
  questService.editQuest(currentQuest._id, currentQuest)
  .then(function(response) {
  });
};

So right now, my database is updating correctly when I click, and the console.log of $scope.quests shows a correctly updated quest object (which I don't really understand, since I'm incrementing currentQuest.progress not $scope.quests[$index] or whatever, but since the scope is updated I don't care), so why on earth aren't the correct ng-shows being displayed and hidden??

Answer 1

Because you are using interpolation braces {{}} ... ng-show reads expressions directly. This is the same for many of the core directives.

Interpolation braces are used to print text into the dom

Change

ng-show="{{quest.progress === 0}}"

To

ng-show="quest.progress === 0"