angularProject/app/views/selected-meals.html

<div class="selected-meals">
  <div class="selected-meals-type">
    breakfast
  </div>
  <div ng-repeat="meal in meals" ng-if="meal.isSelected && meal.type == 'breakfast'" class="selected-meal">
    <div class="selected-meal-img">
      <img ng-src="{{meal.imageUrl}}">
    </div>
    <div class="selected-meal-title">
      <h2>{{meal.mealName}}</h2>
    </div>
    <div class="selected-meal-delete" ng-click="unselect($index)">
      <span class="fa fa-times"></span>
    </div>
  </div>
  <div class="selected-meals-type">
    lunch
  </div>
  <div ng-repeat="meal in meals" ng-if="meal.isSelected && meal.type == 'lunch'" class="selected-meal">
    <div class="selected-meal-img">
      <img ng-src="{{meal.imageUrl}}">
    </div>
    <div class="selected-meal-title">
      <h2>{{meal.mealName}}</h2>
    </div>
    <div class="selected-meal-delete" ng-click="unselect($index)">
      <span class="fa fa-times"></span>
    </div>
  </div>
  <div class="selected-meals-type">
    dinner
  </div>
  <div ng-repeat="meal in meals" ng-if="meal.isSelected && meal.type == 'dinner'" class="selected-meal">
    <div class="selected-meal-img">
      <img ng-src="{{meal.imageUrl}}">
    </div>
    <div class="selected-meal-title">
      <h2>{{meal.mealName}}</h2>
    </div>
    <div class="selected-meal-delete" ng-click="unselect($index)">
      <span class="fa fa-times"></span>
    </div>
  </div>
  <div class="selected-meals-type">
    snacks
  </div>
  <div ng-repeat="meal in meals" ng-if="meal.isSelected && meal.type == 'snacks'" class="selected-meal">
    <div class="selected-meal-img">
      <img ng-src="{{meal.imageUrl}}">
    </div>
    <div class="selected-meal-title">
      <h2>{{meal.mealName}}</h2>
    </div>
    <div class="selected-meal-delete" ng-click="unselect($index)">
      <span class="fa fa-times"></span>
    </div>
  </div>
  <div class="selected-meals-submit">
    <a href="#!/constructor">NEXT STEP</a>
  </div>
</div>