title: Select multiple display names instead of IDs using AngularJS
body: <p>I have a multiple select like this :</p>
  
  <pre><code>&lt;select ng-model="listProds" multiple&gt;
    &lt;option value="10"&gt;product 1&lt;/option&gt;
    &lt;option value="25"&gt;product 2&lt;/option&gt;
    &lt;option value="35"&gt;product 3&lt;/option&gt;
    &lt;option value="48"&gt;product 4&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The values are the Ids for these products ( and this selectbox is generated using PHP )</p>
  
  <p>&amp; I've got this simple code in my <code>app.js</code> file :</p>
  
  <pre><code>var app = angular.module('myapp', []);
  app.controller("PurchasesController", function($scope) {
  
      // Init products Array
      $scope.listProds = [];
  
  });
  </code></pre>
  
  <p>When I display the <code>listProds</code> like this {{ listProds }}, I get an array containing the current selected items, but it only shows the Ids like this if I select all of them <code>["10","25","35","48"]</code>.</p>
  
  <pre><code>&lt;fieldset ng-show="listProds.length &gt; 0"&gt;
      &lt;div data-ng-repeat="p in listProds track by $index"&gt;
          {{ p }} &lt;!– Or –&gt; {{ listProds[$index] }}
          &lt;input type="text" name="pr{{ listProds[$index] }}" /&gt;
          &lt;input type="text" name="qt{{ listProds[$index] }}" /&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>This code generate two text boxes to enter the Price and Quantity for each Product in selected from the selectbox. So instead of using <code>{{ p }}</code> or <code>{{ listProds[$index] }}</code> and displaying the Product Id, I want to display there the Product name.</p>
  
  <p>Thank you in advance.</p>