Made it through Pizza App no prob, Stuck on MoveLog

Hey everyone I am Anthony. Total newb but trying my butt off to learn. For the most part I am flying right on through and loving but every now and then I get a little stuck. This is the first time I cant figure it out on my own. Would someone mind giving me a hand figuring this glitch out? Thanks!

The border for the icon appears but no image and no matter {{ exercise.name }} or {{exercises.name }} I do not get the names.

heres is the code snippet:

MOVE Log
<div class="main" ng-controller="MainController">
  <div class="container">

    <!--
    TODO: Loop through exercises and display each one with this HTML-->
    <div class="row" ng-repeat="exercises in exercises">
      <div class="exercise-icon col-xs-2"><img ng-src="{{ exercise.icon }}"> </div>
        
      <div class="col-xs-6">
        <p class="exercise-name">{{ exercises.name }} </p>
      </div>
      
      <div class="col-xs-4 counters">
        <span class="decrease">-</span><span class="count">  </span><span class="increase">+</span>
      </div>
    </div>

You’ve confused yourself a bit with the looping - exercises is the array you’re trying to access, so you should give the temporary variable a different name (such as exercise (no plural)).

What you’ve done though is given the temporary variable the same name as your array (’exercises’) then attempted to access {{ exercise.icon }}

You will need ng-repeat = "exe in exercises"since this is a array and you’d like to show each of them.
Then in {{}} or ng-bind you need exe.name.

for “exe, exercise or whatever”, you can name it what you like.

Your code should work, it worked for me. See below.

Comment about ‘exercises in exercises.’ Like everyone said, use a name different from the actual array. The array is named “$scope.exercises” in the controller, so feel free to use exercise, exe, a, b, c… While it will work like in my example, it can get a bit confusing later on.

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="MoveLogApp">
    <div class="header">
      <div class="container">
        MOVE Log
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container" ng-repeat ="exercises in exercises">
        TODO: Loop through exercises and display each one with this HTML
        <div class="row">
          <div class="exercise-icon col-xs-2">
          <img ng-src="{{ exercises.icon }}">
</div>
            
          <div class="col-xs-6">
            <p class="exercise-name"> {{exercises.name}}</p>
          </div>
          
          <div class="col-xs-4 counters">
            <span class="decrease" ng-click="decrease($index)">-</span><span class="count"> {{exercises.count}} </span><span class="increase" ng-click="increase($index)">+</span>
          </div>
        </div>
        
      </div>
    </div>

    <div class="footer">
      <div class="container">
      </div>
    </div>
    
    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>

  </body>
</html>