效果圖：
html文件：複製後可直接運行
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>angularJs</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<style>
.container {
margin-top: 100px;
}
.checkbox-dg label {
position: relative;
display: inline-block;
margin-right: 30px;
padding: 15px;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
vertical-align: middle;
cursor: pointer
}
.checkbox-dg input[type=radio], .checkbox-dg input[type=checkbox] {
margin: 0;
opacity: 0;
display: none
}
.checkbox-dg input[type=radio]:checked + label,
.checkbox-dg input[type=checkbox]:checked + label {
border: 1px solid #6cbbee;
background-color: #ddd
}
.round label {
border-radius: 50%
}
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="myCtrl as vm">
<div class="row form-group"><b>單選：</b></div>
<div class="row form-group">
<ul class="nav navbar-nav navbar-left">
<li ng-repeat="item in vm.languageTypes track by $index">
<div class="checkbox-dg round">
<input id="checkbox{{item}}" type="radio" name="languageTypes" value="{{item.name}}"
ng-model="vm.languageTypeValue">
<label for="checkbox{{item}}">{{item.name}}</label>
</div>
</li>
</ul>
</div>
<div class="row form-group">選中單項語言：{{vm.languageTypeValue}}</div>
<hr>
<div class="row form-group"><b>多選：</b></div>
<div class="row form-group">
<ul class="nav navbar-nav navbar-left">
<li ng-repeat="item in vm.languageTypes track by $index">
<div class="checkbox-dg round">
<input id="checkLanguageTypes{{item}}" type="checkbox" name="checkLanguageTypes"
ng-model="item.checked" ng-change="getChoosedLanguages()">
<label for="checkLanguageTypes{{item}}">{{item.name}}</label>
</div>
</li>
</ul>
</div>
<div class="row form-group">選中多種語言-值：{{vm.choosedLanguages}}</div>
<div class="row form-group">選中多種語言-名：{{vm.choosedLanguagesName}}</div>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
var vm = this;
vm.languageTypes = [
{value: 'MandarinChinese', name: '中文'},
{value: 'Cantonese', name: '粵語'},
{value: 'English', name: '英語'},
{value: 'Japanese', name: '日語'},
{value: 'French', name: '法語'},
{value: 'German', name: '德語'},
{value: 'Russian', name: '俄語'},
{value: 'Korean', name: '韓語'}];
$scope.getChoosedLanguages = function () {
vm.choosedLanguages = vm.languageTypes.filter(i => i.checked).map(j => j.value);
vm.choosedLanguagesName = vm.languageTypes.filter(i => i.checked).map(j => j.name);
}
});
</script>
</body>
</html>