<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ButtonsCtrl">
<h4>Checkbox</h4>
<pre>{{checkModel}}</pre>
<div class="btn-group">
<label disabled class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</label>
<label disabled class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</label>
<label disabled class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>
</div>
<h4>Radio & Uncheckable Radio</h4>
<pre>{{radioModel || 'null'}}</pre>
<div class="btn-group">
<label ng-disabled="radioModel === 'Middle'" class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
</div>
</body>
</html>
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
$scope.singleModel = 1;
$scope.radioModel = 'Middle';
$scope.checkModel = {
left: false,
middle: true,
right: false
};
});