javascript - Angular - Use $index to load product images -

i have following form in angularjs app:

<li ng-repeat="device in devices track $index">     <div class="db-handset-image">         <span class="phone-silhouette"></span>         {{ relative image here }}     </div>     <div class="db-device">         <ul class="opts">              <li>                  <select name="manufacturer[ [[$index]] ]" ng-model="selectedmanufacturer" ng-change="getmanufacturermodels(selectedmanufacturer)">                      <option value="">manufacturer</option>                      <option ng-repeat="manufacturer in manufacturers" value="[[manufacturer.id]]">[[manufacturer.name]]</option>                  </select>              </li>              <li>                  <select name="device[ [[$index]] ]" ng-model="selectedmodel" ng-change="loadmodelimage(selectedmodel, $index)">                      <option value="">model</option>                      <option ng-repeat="model in manufacturermodels" value="[[model.id]]">[[model.model + '&nbsp;' + model.variants[$index].memory + '&nbsp;' + model.variants[$index].colour]]</option>                  </select>              </li>          </ul>      </div> </li> 

what happens in form user select manufacturer first dropdown , model model dropdown. model dropdown populate relative models after manufacturer has been selected using angular's $filter.

when user has selected model, loadmodelimage fired , needs happen here after model selection, model image loaded {{relative image here}} placeholder. being done so:

$scope.loadmodelimage = function (modelid, $index) {          $http.get(ajaxurl + '?action=get_handset&hid=' + modelid)             .success(function (data) {                 $scope.selectedhandsets++;                 $scope.modelimages.splice(0, 0, data.handset.images);             })      } 

this issue if replace relative image here placeholder text <img> loading in model images, each model that's been selected appears in every row.

my other issue if remain on same 'row' (see below screenshot) , change handset image, array of images pushed $scope.modelimages when in fact images 'row' should overwritten new selection.

to give clear understanding of how form looks, here's screenshot:

when click 'add new handset' row containing dropdowns visually duplicated , can add select handset.

i hope problem's explained enough, q's ask.