title: How do I add dynamically created select lists that are unique for each item and respond to their changes in Angular
body: <p>I'm new to Angular and am still learning the proper way to do things (and I realize this isn't it!).  Presently, I have an array of objects (in this case ingredients).  Each ingredient has different nutrients, and each nutrient has a different array of measurements assigned to them (some tsp, oz, etc and others slice, 1 cube, etc) .  Each of these measurements have a multiplier associated with them to use for calculations. </p>
  
  <p>When I click on an individual ingredient, It's added to an array of ingredients objects.  This new list of ingredients populates an ingredient list (recipe) where I have each ingredients measurements in a select/option along with an input to accept a quantity. I need to be able to dynamically get the quantity entered and measurement of each ingredient so I can calculate the various nutrients of each ingredient then calculate the recipe as a whole.  I'm saving the combined nutritional value in an array and am not worried about saving the individual calculation.  I'll then want to save the quantity, measurement and ingredient to a separate array (a recipe).  </p>
  
  <p>I can get this to work with single items but multiple items has been a challenge.</p>
  
  <p><strong>This is from the controller</strong>.  Add ingredient is called from the full list of ingredients:  </p>
  
  <pre class="lang-javascript prettyprint-override"><code>$scope.addIngredient = function(ndb,name,nutrients){
  
          var id = $scope.recipe.ingredients.length +1;
          //$scope.recipe.ingredients is where I'm saving the individual ingredients
  
          $scope.measure  = nutrients[0].measures;
          //each ingredient includes a property called measures for each
          //  nutritional item (ie vitamin A, Protein, etc).
          //each of these is arrays is identical for a single ingredient, so I 
          //just grabbed the first. 
  
          var measurement = nutrients[0].measures;//I changed the following code 
          // to this because $scope.measurement was assigning all of my selects 
          //to the same thing.
          $scope.measurement = nutrients[0].measures;
  
          // this worked to assign the model for single ingredients, but not 
          //multiple, I've been throwing a bunch of stuff at the wall and have 
          //kept this as an example
          $scope.recipe.ingredients.push({
           id: id,
           name: name,
           ndbno: ndb,
           nutrients: nutrients,
           measures: measurement
          })
          //This is how Im currently storing the each recipes ingredient.
          };
  
          $scope.convertToNumber = function(){
          //This is called when on selects ng-change, measureMultiplier is used 
          //to calculate each ingredient according to its selected measurement.
          //measurement.eqv should gets it's value from the selected option 
          // Presently it gets called but is undefined.
  
          $scope.measureMultiplier = ($scope.measurement.eqv);
  
         };
         $scope.qty = 1; //The number of a particular ingredient pre-populated to 1     
         $scope.recipe.totalled = []; //This is where I will store the combined 
         //nutritional values for each recipe. 
  </code></pre>
  
  <p>This is in the html:</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;single-ingredient ingredient="recipe.ingredients" 
       qty="qty" measurement="measurement" 
       on-change="convertToNumber()" 
       on-remove="removeIng(id)"&gt;
  &lt;/single-ingredient&gt;
  </code></pre>
  
  <p>I'm not using on-remove right now.</p>
  
  <p>This is my current directive, I'm sure this is where the majority of the problem lies.  Some of it works and visually it's operating.  But when it fires ng-change it's undefined.  Also, the <code>ingredient[{{item.id -1}}].measures</code> grabs the correct information, but if I remove the ingredient, it gets screwed up. Plus it's a mess.</p>
  
  <pre class="lang-javascript prettyprint-override"><code>.directive('singleIngredient',[ function(){
      return {
  
          scope: {
              ingredient : '=',
              qty : '=qty',
              measurement : '=measurement',
              'removeIng': '&amp;onRemove',
              'convertToNumber': '&amp;onChange'
          },
          restrict: "AE",
          transclude: true,
          template: ' &lt;ul&gt;&lt;li ng-repeat="item in ingredient" &gt;' +
              '&lt;input ng-model="qty" size="4" &gt;{{item.name}}' +
              '&lt;select ' +
                'ng-options="item.label for item in ingredient[{{item.id - 1}}].measures" ' +
                'ng-model="measurement" ' +
                'ng-change="convertToNumber()"&gt;' +
              '&lt;/select&gt;' +
              '&lt;span&lt;/span&gt;' +
              '&lt;/li&gt;&lt;/ul&gt;'
      }
  </code></pre>
  
  <p>Again, ultimately, I need to get the quantity when it changes and the value from select/options list when it changes along with it's associated ingredient (by id or similar).  I'm willing to do the leg work if someone can point me in the right direction.  Thanks!</p>