Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div lease-text-directive>
</div>
<!-- leaseTextDirective -->
<div lease-input-directive>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('LeaseTemplateController', ['$scope', function($scope) {
  //Lease Special Template
  $scope.percent_id = [{
    value: '20'
  }];
}]);

myApp.directive('leaseTextDirective', function() {
  return {
    restrict: 'A',
    template: '<div class="leasespecial" ng-controller="LeaseTemplateController">\
				<div class="firstsec">\
		              <div class="percNumber">\
		                <h1 id="perId" ng-repeat="bb in percent_id">{{bb.value}}</h1>\
		              </div>\
	            </div>'
  };
});
myApp.directive('leaseInputDirective', function() {
  return {
    restrict: 'A',
    template: '<h2>Lease Special Template</h2>\
        <form ng-controller="LeaseTemplateController">\
          <div class="form-group" ng-repeat="cc in percent_id">\
            <div class="input-group">\
              <input class="form-control input" type="text" placeholder="Enter Percent" ng-model="cc.value">\
            </div>\
          </div>\
        </form>'
  };
});