Angular variables not updating outside loop

Question

So I'm running into a weird issue with Angular where I created a raw predefined object to loop through card stats for a card game I am working on.

    $scope.attack = 500;
    $scope.defense = 500;

    $scope.cardPowers = [
    {
      name: "balanced",
      attack: 2500,
      defense: 1500,
      cost: 3
    },
    {
      name: "high-offense",
      attack: 2500,
      defense: 1000,
      cost: 5
    },
    {
      name: "base-offense",
      attack: 1800,
      defense: 1000,
      cost: 4
    }
  ];

This is all in the main controller where most of my functionality is going through. I'm looping through them and creating buttons where someone can choose the attributes for the car like so:

<div id="preview" class="vertical-display card twenty-five building" ng-class="{'building': gotComics, 'editing' : editing}" ng-controller="Save">
{{attack}} : {{defense}}
<h3>Card Builder</h3>
<div class="card-functions">
  <ul>
    <li><a href="" ng-click="saveNewCard(cardName, cardDescription, 500, 500, 5, cardThumbnail, cardBackground, '1', cardType)">SAVE <i class="fa fa-floppy-o"></i></a></li>
    <li><a href="" ng-click="editing = true">EDIT <i class="fa fa-pencil-square-o"></i></a></li>
    <li><a href="" ng-click="editing = false" ng-show="editing">CLOSE <i class="fa fa-times"></i></a></li>
  </ul>
  <!-- <a href="" ng-click="saveImage()" class="button small saveImage"><i class="fa fa-file-image-o"></i> Save as Image</a> -->
</div>
<div ng-show="editing" class="options">
  <h4>Choose Power</h4>
  <p ng-repeat="power in cardPowers"><a href="" ng-click="attack=power.attack">{{power.name | uppercase}}       {{attack}}</a></p>

  <h4>Thumbnail Positioning</h4>

  <!-- repeat card positioning -->  
</div>

<div ng-show="gotComics">
  <?php include('flip-container-code.php'); ?>
</div>

Mostly everything works fine, however, when I click on my button to set the new attack, it only updates {{attack}} inside the loop, and not outside. See this screencast to see what I am talking about: http://screencast.com/t/0ZukLLYqtUYM

Not sure why this is happening, did some research and it seems I am doing this all right, so it's odd. Note: Everything else is actually working just fine, my card saving function, seeing the default attack and defense values, the models, etc.

Answer 1

To start, you should move the implementation details outside of the view (i.e., you shouldn't be directly setting model.attack = power.attack in the view, that should be at least one level deeper, in the controller). With that, moving this to the controller will resolve your issue itself.

Your view can look like this:

<p ng-repeat="power in cardPowers">
  <a href="" ng-click="setAttackPower(power)">
    {{power.name | uppercase}} {{attack}}
  </a>
</p>

And in your controller:

$scope.setAttackPower = function(power) {
  $scope.attack = power.attack;
}