How to set radio button checked by button click in AngularJS ?

14 Oct, 2020
In this article, we will see how to set the radio button checked by button click in AngularJS.
Approach: The approach is to use the ng-checked to check the radio button in the DOM. In the first example, a single radio button is checked by the button and In the second example, multiple radio button are checked by button. ng-model is used to bind the radio buttons.
Example 1:
<!DOCTYPE HTML><html>  <head>    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </script>      <script>        var myApp = angular.module("app", []);        myApp.controller("controller", function ($scope) {            $scope.radioCh = function () {                if (!$scope.radio) {                    $scope.radio = true;                } else {                    $scope.radio = false;                }            }        });    </script></head>  <body style="text-align:center;">    <h1 style="color:green;">        GeeksForGeeks    </h1>    <p>        How to set radio button checked        by button click in AngularJS    </p>      <div ng-app="app">        <div ng-controller="controller">            Radio button: <input type="radio"                     ng-checked="radio">            <br><br>            <button ng-click="radioCh()"                     ng-model='radio'>                Click here            </button>            <br><br>        </div>    </div></body>  </html>
Output:
Example 2:
<!DOCTYPE HTML><html>  <head>    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </script>      <script>        var myApp = angular.module("app", []);        myApp.controller("controller", function ($scope) {            $scope.radioCh = function () {                if (!$scope.radio) {                    $scope.radio = true;                } else {                    $scope.radio = false;                }            }        });    </script></head>  <body style="text-align:center;">    <h1 style="color:green;">        GeeksForGeeks    </h1>    <p>        How to set radio button checked        by button click in AngularJS    </p>    <div ng-app="app">        <div ng-controller="controller">            Radio button 1: <input type="radio"                 ng-checked="radio">            <br><br>              Radio button 2: <input type="radio"                     ng-checked="radio">            <br><br>              Radio button 3: <input type="radio"                     ng-checked="radio">            <br><br>              <button ng-click="radioCh()"                     ng-model='radio'>                Click here            </button>            <br><br>        </div>    </div></body>  </html>       
Output:
AngularJS-Misc
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Routing in Angular 9/10
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property