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??
