Create a div tag in html file with specific id for example CheckBoxArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:
HTML file:
<div id="CheckBoxArea" ng-init="init()"></div>
Javascript file:
var data ={"checkbox_default_data" : {"id":1, "label":"Default check box", "type":"default", "checked":true},"checkbox_primary_data" : {"id":2, "label":"Primary check box", "type":"primary", "checked":false},"checkbox_success_data" : {"id":3, "label":"Success check box", "type":"success", "checked":true},"checkbox_danger_data" : {"id":4, "label":"Error check box", "type":"danger", "checked":true},"checkbox_warn_data" : {"id":5, "label":"Warn check box", "type":"warning", "checked":false},"checkbox_info_data" : {"id":6, "label":"Info check box", "type":"info", "checked":true}};
$scope.init = function() {
loadCheckBox();
}
function loadCheckBox() {
var check_box_tpl = $(modelTemplate).filter('#checkBoxes').html();
var html = Mustache.to_html(check_box_tpl, data.checkbox_default_data);
$('#CheckBoxArea').html(html);
var html = Mustache.to_html(check_box_tpl, data.checkbox_primary_data);
$('#CheckBoxArea').append(html);
var html = Mustache.to_html(check_box_tpl, data.checkbox_success_data);
$('#CheckBoxArea').append(html);
var html = Mustache.to_html(check_box_tpl, data.checkbox_danger_data);
$('#CheckBoxArea').append(html);
var html = Mustache.to_html(check_box_tpl, data.checkbox_warn_data);
$('#CheckBoxArea').append(html);
var html = Mustache.to_html(check_box_tpl, data.checkbox_info_data);
$('#CheckBoxArea').append(html);
}