I am in the process of creating a tool for a website that serves as a "deal builder". Within this builder tool, there is a button labeled "add new item" which will insert a new device item into the <li> list.
<ul class="deal-builder-devices entity">
<li ng-repeat="device in devices">
<div class="db-handset-image">
<span class="phone-silhouette" ng-hide="hideSilhouette"></span>
<img ng-repeat="image in modelImages" src="[[image]]" ng-hide="!hideSilhouette" />
</span>
</div>
<div class="db-device">
<ul class="opts">
<li>
<select 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 ng-disabled="!models > 0" ng-model="selectedModel" ng-change="loadModelImage(selectedModel)">
<option value="">Model</option>
<option ng-repeat="model in models" value="[[model.id]]">[[model.model]]</option>
</select>
</li>
</ul>
</div>
</li>
</ul>
<div class="deal-builder-controls entity">
<button class="db-add-handset" ng-click="addDevice()"><i class="fa fa-plus-circle"></i> Add another handset</button>
<button class="db-find-deals">Find deals</button>
</div>
The issue I'm encountering is that all select options get assigned the same model, meaning that if I change one dropdown selection, it impacts all newly created dropdowns. How can I resolve this problem?
This is the current functionality of $scope.addDevice();:
$scope.devices = [0];
$scope.devicesCounter = 0;
$scope.addDevice = function () {
$scope.devicesCounter++;
$scope.devices.push($scope.devicesCounter);
}