How to set radio button default checked and run the function on page load?

Question

I have a modal window where i have one radio button with current code when i select the radio button it loads the data, How can i set default value checked for radio button and load the toggleChange() method on page load ?

main.html

<div class="col-md-5">
                <input type="radio"
                    name="optionsRadios" id="unrated" ng-value="'assign'" checked="checked"
                    ng-model="nonPersistentProcess.showCriteria" ng-init="toggleChange()">
                    <strong>Show all available controls that are not aligned to this risk</strong>
            </div>

main.js

  $scope.toggleChange = function() {
                if ($scope.nonPersistentProcess.showCriteria === 'disassign') {
                    $scope.controlRiskGridOption = riskToControlGridDataService.getControlsInProcess();
                    $scope.controlRiskGridOption.dataSource = riskToControlGridDataService.getControlsInProcessGridDataSource($stateParams.processId, $scope.nonPersistentProcess.riskKey);
                } else if ($scope.nonPersistentProcess.showCriteria === 'assign') {
                    $scope.controlRiskGridOption = riskToControlGridDataService.getAllControls($scope);
                    $scope.controlRiskGridOption.dataSource = riskToControlGridDataService.getAllControlsGridDataSource($stateParams.processId, $scope.nonPersistentProcess.riskKey);
                }
                $scope.selectedFlagControlInProcess = true;
                $scope.selectedTypeProcess = new Date().getTime();
                $scope.controlInPrcsSelected = {};
                $scope.controlInPrcsNoAlignSelected = {};
                $scope.controlInPrcsSelectedArray = {};
                $scope.controlInPrcsNoAlignSelectedArray = {};
            };

Answer 1

Using JQuery you can use the Ready method and then set the radio you want to checked using prop :

$(document).ready(function(){
    //code
    toggleChange();
    $("#radio").prop("checked", true);
)}

Answer 2

ng-init is best for initializing data for scope.

As @Jerry said, the angular.element(document).ready method is the best place for running logic on page load; to avoid conflicting with other events might be happening on the page, you can add a $timeout which delays the execution of toggleChange to the next digest cycle. It's not optimal, but it should get you going.

    angular.element(document).ready(function(){
        $timeout(function(){
            $scope.$root.toggleChange();
        },0)
    });

Answer 3

set

  $scope.nonPersistentProcess.showCriteria = 'assign';

in your controller and call the function

  $scope.toggleChange();

at the bottom of your controller or right after the $scope object declaration

Answer 4

this question is already answered in past posts .

But this is the one that i'm currently using. and it works fine

Your controller, including $timeout

var $scope.init = function(){ //your code }

$timeout($scope.init)

and also this

angular.element(document).ready(function () {

 // your code here 

});

(link: How to execute angular controller function on page load? )