Angular $watch newValue is undefined after the first click on a radio button

Question

I have a radio button inside a directive and I have a number of these directive on the page. All of these radio buttons have the same name. When I click on any of them a newValue in a $watch is undefined. Also ng-change event fires only ones (I guess for the same reason). My question is how can I know the current status of the radio button inside a directive on each click (that I will pass to the parent directive)?

 var app = angular.module("app", []);
        app.directive("choiceRb", function() {
            return {
                template: '<input type="radio" id="{{elid}}" name="selector"  ng-change="onChange()" ng-model="checked" >',
                scope: {                   
                    elid: "@"
                },
                link: function ($scope, $element, attr, cntr) {                  
                    $scope.checked = $element[0].querySelector("input[type=radio]").checked;                   
                    $scope.$watch('checked', function (newval, oldval) {
                        console.log(newval);
                    }, true);
               
                    $scope.onChange = function () {
                        console.log("onChange");
                    }
                }
            };
        });
        app.controller("myC", ["$scope", function ($scope) {
            $scope.model = {};          
            $scope.model.elid = "1";           
            $scope.model.elid1 = "2";
        }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="app" ng-controller="myC">
    <div style="width:300px; height:300px; border:1px solid red;position:relative;">
        <choice-rb elid="{{model.elid}}"></choice-rb>
        <choice-rb elid="{{model.elid}}"></choice-rb>
    </div>
</div>

score 0 · Accepted Answer · edited May 23 '17 at 12:14

It doesn't look like you have any value attribute on your radio input element. Most likely you would want to be passing a value as an attribute on the choice-rb elements in your parent. So you would need to make some changes to the directive and the template which uses it.

add the elval attribute to choiceRb directive and ng-value attribute to the input type="radio" in its template.

app.directive("choiceRb", function() {
    return {
        template: '<input type="radio" id="{{elid}}" ng-value="{{elval}}" name="selector"  ng-change="onChange()" ng-model="elmodel" >',
        scope: {                   
            elid: "@",
            elval: "@",
            elmodel: "="
        },
        ...

add the elval attribute to the choice-rb elements in main template

<div ng-app="app" ng-controller="myC">
    <div style="width:300px; height:300px; border:1px solid red;position:relative;">
        <choice-rb elid="selector-{{model.elid}}" elval="{{model.elid}}" elmodel="model.value"></choice-rb>
        <choice-rb elid="selector-{{model.elid1}}" elval="{{model.elid1}}" elmodel="model.value"></choice-rb>
    </div>
</div>

Notice that I have also changed the elid attributes, prefixing with selector-, this is because input id's must start with a letter and the model.elid and model.elid1 values you have defined are both numbers (which are perfectly valid for the input's value attribute.)

Edit: Added the elmodel attribute to use for shared ng-model.

Now it stops at the same time but instead of undefined I get 1 (for the first one) and 2 (for the second one) — Julian, Sep 09 '16 at 15:30
I expect to get 1 and 2 but continuously means after the first time $watch or onChange do not fire anymore. — Julian, Sep 12 '16 at 13:08
probably because you are defining `$scope.checked` in an isolated scope, so the radio buttons aren't using/setting the same `ng-model` and therefore it is never changing. You may see the change visually because the radio inputs have the same `name` attribute so the browser knows how to handle it. — plong0, Sep 12 '16 at 13:53
updated answer for sharing ng-model between instances of `choice-rb` — plong0, Sep 13 '16 at 03:20

Angular $watch newValue is undefined after the first click on a radio button

1 Answers1