Issues indirectly updating ngModel from ngClick

Question

I have an ngRepeat that populates a list of customers, shown here :

<div ng-repeat="terr in terrData.data">
    <div class="customer-row" ng-click="clickCustomerSelect(terr)">
        <input class="customer-radio" type="radio" name="customer-select" ng-model="selectedCustomerRow" value="{{terr.customerID}}">
        <div class="contact-data-column">{{terr.custNm}}</div>  
        <div class="primaryphone-data-column">{{terr.primaryPhone}}</div>
        <!-- other customer data -->
    </div>
</div>

There is a click event on the customer-row div that says if the row is clicked, the radio button for the row should be checked.

The basic controller logic shown here :

$scope.clickCustomerSelect = function(customer){
    $scope.selectedCustomerRow = customer.customerID.toString();
    //Other business logic
};

I see that whenever the customer row is clicked (not the radio button), the model gets properly updated, and the radio button corresponding to that value is checked. Note that this is expected functionality.

The issue i'm seeing is that if you check the radio button manually (i.e. not clicking the row), the model will no longer respond to updates from clicking the row.

I'm wondering if somehow once you select the radio button you're going outside of angular scope?

EDIT: Sample model

terrData.data = [{
    "customerID": 1,
    "companyName": "Name 1",
    "custNm": "Blank",
    "primaryPhone": "111-111-1111"
}, {
    "customerID": 2,
    "companyName": "Name 2",
    "custNm": "Blank",
    "primaryPhone": "111-111-1112"
}, {
    "customerID": 3,
    "companyName": "Name 3",
    "primaryPhone": "111-111-1113"
}];

please add your `terrData` model in controller – Maxim Shoustin Sep 24 '13 at 19:09 — Maxim Shoustin, Sep 24 '13 at 19:09

Nitish Kumar · Accepted Answer · 2013-09-24T20:00:13.753

2

  $scope.selectedCustomerRow = customer.customerID.toString();

Replace To:

 $scope.selectedCustomerRow = customer.customerID;

onclick with it set selectedCustomerRow.

in HTML

 <input class="customer-radio" type="radio" name="customer-select" ng-model="selectedCustomerRow" value="{{terr.customerID}}">

Replace To:

  <input class="customer-radio" type="radio" name="customer-select" ng-model="$parent.selectedCustomerRow" value="{{terr.customerID}}">

DEMO

edited Sep 24 '13 at 20:00

answered Sep 24 '13 at 19:20

Nitish Kumar

4,850
3
20
38

This demo displays the issue perfectly. Select the radio button, then try to select the row via the click function again. The radio button will stop selecting. – alex.hall Sep 24 '13 at 19:46
Click the radio button for A, then click the text for B, then click the text for A. The radio button will no longer get selected from the A Text. – alex.hall Sep 24 '13 at 19:58

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

Likely your problem is this: https://stackoverflow.com/a/17607794/170407

Short answer: ng-model almost always needs a dot in it.

edited May 23 '17 at 12:28

Community

1
1

answered Sep 24 '13 at 19:32

FMM

4,289
1
25
44

Issues indirectly updating ngModel from ngClick

2 Answers2