Inoic framework: angular scope not affecting selected row ng-model as expected


#1

I’m trying to select a product from the suggest box. When a select a product, the qty and unit cost as to appear in the text box automatically which is done using angularjs ng-model. The Add Item in the image will add an empty row, where we can select product/service for invoice.

Now the issue is, when i click Add Item twice and select product/service in the first row, qty and unit cost is updated for the 2nd row.
Can anyone help me out in this issue
Thanks in advance.

Here is my html

  <div class="row" ng:repeat="item in invoice.items">
    <div class="col col-50">
      <ion-autocomplete name="product" ng-model="item.productId" item-value-key="productId"
        item-view-value-key="productName" items-method="getProducts(query)"
        items-method-value-key="items" items-clicked-method="productClickCallBack(callback)" 
        ng-value="calculateAll()" placeholder="Product Or Service" required/>
    </div>
    <div class="col">
      <input type="number" maxlength="4" placeholder="Qty"
        ng-model="item.qty" ng-change="calculateAll()">
    </div>
    <div class="col">
      <input type="number" maxlength="6" placeholder="Unit Cost"
        ng-model="item.unitCost" ng-change="calculateAll()">
    </div>
  </div>

Here is productClickCallBack(callback) method definition:

$scope.productClickCallBack = function(callback) {

  $scope.item.qty = 1;
  $scope.item.unitCost = callback.item.sellingPrice;
};