JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="asset in asset">
<h5>{{ asset.title }} categories are...{{ asset.category[0] + " and " + asset.category[1] }}</h5>
<div class="form-group">
<label>Business</label>
<div class="checkbox" ng-repeat="category in categoryFactory.business">
<input type="checkbox" id="{{category}}" ng-checked="isCategory(category)" >
<label for="{{category}}">{{category}}</label>
</div>
</div>
<div class="form-group">
<label>Personal</label>
<div class="checkbox" ng-repeat="category in categoryFactory.personal">
<input type="checkbox" id="{{category}}" ng-checked="isCategory(category)" >
<label for="{{category}}">{{category}}</label>
</div>
</div>
</div>
</div>
</div>
JavaScript
var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('randomService', function () {
});
//factory style, more involved but more sophisticated
myApp.factory('categoryFactory', function () {
var business = ["starting-a-business", "running-a-business", "online-business", "employment-hr", "finance-admin"];
var personal = ["wills-and-trusts", "power-of-attorney", "personal-admin"];
var factory = {
business: business,
personal: personal
};
return factory;
});
function MyCtrl($scope, categoryFactory, randomService) {
$scope.asset = [{
title: "Sales Agreement",
category: ["finance-admin", "running-a-business"]
}];
$scope.categoryFactory = categoryFactory;
$scope.isCategory = function(category){
return $scope.asset[0].category.indexOf(category) >= 0;
}
}