JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="myApp">
  <div ng-controller="SelectCtrl">
    <table class="component-ingredients-container">
      <tr ng-repeat-start="component in currentRecipe.Components" ng-show="component.Name">
        <td>&nbsp;</td>
        <td class="component-name-cell">
          <span class="component-name">{{component.Name}}</span>
        </td>
      </tr>
      <tr ng-repeat-end ng-repeat="ingredient in component.Ingredients">
        <td>
          <span class="ingredient-amount">{{ingredient.Amount}}</span>
          <span class="ingredient-unit">{{ingredient.Unit}}</span>
          <span>{{ingredient.Lookup.Name}}</span>
          <div class="ingredient-preparation" ng-show="ingredient.Preparation">
            <span>{{ingredient.Preparation }}</span>
          </div>
        </td>
      </tr>
    </table>
    <button type="button" ng-click="showNubmer()">Show number</button>
  </div>

</body>

JavaScript

var myApp = this.angular.module('myApp', []);

// declare a controller
myApp.controller('SelectCtrl', function($scope) {
  $scope.currentRecipe = {
    Components: [{
      Name: 'Sauce',
      Ingredients: [{
        Amount: 2.5,
        Unit: 'cups ',
        Lookup: {
          Name: 'tomatoes'
        },
        Preparation: 'Preparation1'
      }, {
        Amount: 0.5,
        Unit: 'tablespoon ',
        Lookup: {
          Name: 'spices'
        },
        Preparation: 'Preparation2'
      }, {
        Amount: 0.125,
        Unit: 'ounces ',
        Lookup: {
          Name: 'something '
        },
        Preparation: 'Preparation3'
      }]
    }]
  };
  $scope.showNubmer = function() {
    var amounts = document.getElementsByClassName("ingredient-amount"); 
    var values = '';
    angular.forEach(amounts, function(value, key) {
      values = values + ' ' +value.innerHTML;
    });
    alert(values);
  };
});