<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

    <script src="script.js"></script>
  	<script src="formpanel.js"></script>
  	<script src="formitem.js"></script>
	
  </head>

  <body data-ng-app="BL">
					<div id="bl-mytemplates-editor" class="panel-group" style="width:274px;">

						<form-panel id="bl-mytemplates-editor" data-header="Template Properties">
							<form-item data-label="Name">
								<input type="text" class="form-control input-sm" placeholder="name" data-ng-model="templateData.name" />
							</form-item>
							<form-item data-label="Width">
								<input type="number" class="form-control input-sm" placeholder="width" data-ng-model="templateData.width" />
							</form-item>
							<form-item data-label="Height">
								<input type="number" class="form-control input-sm" placeholder="height" data-ng-model="templateData.height" />
							</form-item>
							<form-item data-label="Margin">
								<input type="number" class="form-control input-sm" placeholder="margin" data-ng-model="templateData.margin" />
							</form-item>
							<form-item data-label="Border">
								<input type="number" class="form-control input-sm" placeholder="border" data-ng-model="templateData.border" />
							</form-item>
						</form-panel>
  				</div>
  </body>

</html>
(function () {
    angular.module('BL', []);
})();
(function () {
	angular.module('BL').directive('formItem', FormItem);

	function FormItem() {
		return {
			restrict: 'E',
			scope:
				{
					label: '@'
				},
			transclude: true,
			templateUrl: 'formitem.html'
		};
	}
})();

(function () {
	angular.module('BL').directive('formPanel', FormPanel);

	function FormPanel() {
		return {
			restrict: 'E',
			scope: 
			{
				id: '@',
				header: '@'
			},
			transclude: true,
			replace: true,
			templateUrl: 'formpanel.html'
		};
	}
})();

<div class="form-group form-group-xs row">
	<label class="control-label col-xs-4"><span>{{label}}</span></label>
	<div class="col-xs-8">
		<ng-transclude></ng-transclude>
	</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<a href="#{{id}}-items" data-toggle="collapse" data-parent="{{id}}">{{header}}</a>
	</div>
	<div id="{{id}}-items" class="panel-collapse collapse">
		<div class="panel-body form-horizontal">
			<ng-transclude></ng-transclude>
		</div>
	</div>
</div>