Radio button not checked at first time

Question

I am using angularjs and Jqgrid, in a table I have two columns one has radio buttons and the other containes numbers. I have implemented this configuration to show the table and add the click event on radio button.

    /*global appModule */
'use strict';

(appModule.lazy || appModule)
.service('ModalBusquedaNumeroDeViaGridSrv', ['$translate', function($translate) {

    function getOptions() {
        var options = {
            datatype: 'local',
            colNames: [
                '',
                $translate('datoRiesgoNuevo.DatosModalCatastralHogar.numerosDisponibles')
            ],
            colModel: [{
                name: 'selRadio',
                index: 'selRadio',
                align: 'center',
                width: 40,
                formatter: function(data, cell, obj) {
                    return '<input type=\"radio\" id=\"' + cell.rowId + '\" name=\"selRadio\" />';
                }
            }, {
                name: 'numerosDisponibles',
                index: 'numerosDisponibles',
                align: 'center',
                width: 400
            }],
            rownumbers: false,
            rowTotal: 20,
            rowList: [
                5,
                10,
                15
            ],
            loadonce: true,
            gridview: true,
            sortname: 'numerosDisponibles',
            viewrecords: true,
            sortorder: 'asc',
            footerrow: false,
            autowidth: true,
            shrinkToFit: true,
            height: '220',
            scrolloffset: 0,
            scroll: true
        };

        return options;

    }
    return {
        getOptions: getOptions
    }
}]);

I use this service to get the options and in the controller I pass the data and options to an array. Here is the controller.

drn.numerosVia = [{
    'sel': 'false',
    'numerosDisponibles': '10'
}, {
    'sel': 'false',
    'numerosDisponibles': '20'
}, {
    'sel': 'false',
    'numerosDisponibles': '30'
}];

drn.gridNumerosVia = {
    data: drn.numerosVia,
    options: ModalBusquedaNumeroDeViaGridSrv.getOptions()
};

$scope.$on('drn.gridNumerosViaSet', function(event, myGrid) {
    myGrid.jqGrid('setGridParam', {
        loadComplete: function(data) {
            var getColumnIndexByName = function(columnName) {
                    var cm = myGrid.jqGrid('getGridParam', 'colModel'),
                        i = 0,
                        l = cm.length;
                    for (; i < l; i++) {
                        if (cm[i].name === columnName) {
                            return i; // return the index
                        }
                    }
                    return -1;
                },
                i = getColumnIndexByName('selRadio');

            function changeMyModel(i, input) {

                var dataRow = i - 1;
                drn.gridNumerosVia.data[dataRow].sel = input.checked;
                $scope.$apply();
            }

            // nth-child need 1-based index so we use (i+1) below
            angular.element('tbody > tr.jqgrow > td:nth-child(' + (i + 1) + ') > input',
                this).click(function(e) {
                var rowId = angular.element(e.target).closest('tr').attr('id');
                changeMyModel(rowId, this);
            });
        }
    });
});

Keep in mind that this table is shown inside a Modal. This problem occurs only the first time I click on the radio button, once I click on them all the first time, they work fine.

Answer 1

drn.numerosVia = [{
    '̶s̶e̶l̶'̶:̶ ̶'̶f̶a̶l̶s̶e̶'̶,̶
    'sel': false,
    'numerosDisponibles': '10'
}, {
    '̶s̶e̶l̶'̶:̶ ̶'̶f̶a̶l̶s̶e̶'̶,̶
    'sel': false,
    'numerosDisponibles': '20'
}, {
    '̶s̶e̶l̶'̶:̶ ̶'̶f̶a̶l̶s̶e̶'̶,̶
    'sel': false,
    'numerosDisponibles': '30'
}];

Set the selection to Boolean false instead of String "false".

In JavaScript, the String "false" is evaluated as truthy.