AngularJS toggle radio buttons with default selection.

by softvar

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-app="miniapp">
    <div ng-controller="Ctrl" class="cont">
        <section >
            <h2>
                <input type="radio" name="somethign" value="1" ng-model="checkboxSelection"/> Checkbox 1
                <input type="radio" name="somethign" value="2" ng-model="checkboxSelection"/> Checkbox 2
            </h2>
            <div>
                All inside here should be enabled for Checkbox 1 only<br/>
                <input type="button" ng-model="btn3" ng-show="isCheckboxSelected('1')" value="btn1"/>
                <input type="button" ng-model="btn4" ng-show="isCheckboxSelected('1')" value="btn2"/>
                <input type="text" ng-model="txt2" ng-show="isCheckboxSelected('1')" value="btn2"/>
                --{{isCheckboxSelected('1')}}--
            </div>
             <div>
                All inside here should be enabled for Checkbox 2 only<br/>
                <input type="button" ng-model="btn3" ng-show="isCheckboxSelected('2')" value="btn1"/>
                <input type="button" ng-model="btn4" ng-show="isCheckboxSelected('2')" value="btn2"/>
                <input type="text" ng-model="txt2" ng-show="isCheckboxSelected('2')" value="btn2"/>
                --{{isCheckboxSelected('2')}}--
            </div>
        </section>
    </div>    
</div>

CSS

.cont div{
    border:2px solid red;
    margin: 5px;
}

JavaScript

var $scope;
var app = angular.module('miniapp', []);

function Ctrl($scope) {
    // Can replace this with: ng-init="checkboxSelection = '1'".
    $scope.checkboxSelection = '1';
    
    // Can use parseInt(x, 10) on $scope.checkboxSelection or index.toString() if you want to remove the single quotes you see in isCheckboxSelected('1').
    $scope.isCheckboxSelected = function(index) {
        return index === $scope.checkboxSelection;
    };
}