Angular Material Layout
HTML
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<body ng-app="BlankApp" ng-cloak ng-controller="CheckboxController">
<md-content>
<div layout="column">
<div layout="row" layout-wrap class="epg-checkbox-group" ng-repeat="filterDatas in filterData" ng-init="outerIndex=$index">
<md-subheader class="md-primary" flex="100">{{filterDatas.title}}</md-subheader>
<div flex="50" class="epg-checkbox" ng-repeat="lists in filterDatas.list " ng-init="innerIndex=$index">
<md-checkbox aria-label="checkbox" ng-model="lists.checked" ng-change="doSomething(lists,lists.checked,lists.listTitle,innerIndex)" ng-hide=lists.removedchecked>{{lists.listTitle}}</md-checkbox >
</div>
<md-button ng-click="clickButton(brands)" class="md-raised md-primary" ng-disabled="isDisabled">Apply</md-button>
</div>
<div ng-if="selectedAlarms" layout="row" layout-wrap>
<md-subheader class="md-primary">Selected</md-subheader>
<div layout="row" layout-wrap flex="100" class="epg-checkbox-group p-b16" ng-repeat="filterDatas in filterData" ng-init="outerIndex1=$index">
<div flex="50" ng-if="lists.removed" class="epg-checkbox" ng-repeat="lists in filterDatas.list" ng-init="innerIndex1=$index">
<md-checkbox aria-label="checkbox" ng-model="lists.checked"...
JavaScript
angular.module('BlankApp', ['ngMaterial'])
.config(['$mdThemingProvider', function($mdThemingProvider) {
'use strict';
$mdThemingProvider.theme('default')
.primaryPalette('blue');
}])
.controller('CheckboxController', ['$scope','$filter',function($scope, $filter) {
$scope.filterData = [
{
id: 1,
title: "Attribute Type",
list: [
{
"listTitle": "Attribute 1",
"checked": false,
},
{
"listTitle": "Attribute 2",
"checked": false,
},
{
"listTitle": "Attribute 3",
"checked": false,
},
{
"listTitle": "Attribute 4",
"checked": false,
},
{
"listTitle": "Attribute 5",
"checked": false,
},
{
"listTitle": "Attribute 6",
"checked": false,
},
{
"listTitle": "Attribute 7",
"checked": false,
},
...