Problem with dynamic template and transclude

[heyokdang]

Create transclude with dynamic template, i followed this article: http://www.spaprogrammer.com/2015/01/angularjs-transclusion-with-nested.html

this is what i have customized:

` dp = angular.module("ng-bs3-datepicker", []);

dp.directive("ngBs3Datepicker", [ "$compile", function($compile) { var templatefirst = "<div class="input-group date"><div class="input-group-addon">"; var templateend = "<input type="text" class="form-control" /><div class="input-group-btn"><button type="button" class="btn btn-default"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar">"; var getTemplate = function(contentType){ var template = ""; template = templatefirst + contentType + templateend; return template; }; //template: "<div class="input-group date"><div class="input-group-addon">Loan 2start date<input type="text" class="form-control" /><div class="input-group-btn"><button type="button" class="btn btn-default"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar">", return { restrict: "E", replace: true, transclude: true, //template: "<div class="input-group date"><div class="input-group-addon">Loan 2start date<input type="text" class="form-control" /><div class="input-group-btn"><button type="button" class="btn btn-default"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar">", link: function($scope, element, attr, nullController, transclude) { var attributes, dateFormat, input, resetValue, dateViewMode, dateMinViewMode, defaultDate, textLabel; dateFormat = ""; dateViewMode=""; dateMinViewMode = ""; defaultDate = "";

  // add dynamic template
  element.html(getTemplate(attr.textlabel));
  //$compile(element.contents())($scope);
  transclude($scope.$parent, function (clone, $scope) {
        element.children().append(clone);
    });
  
  
  attributes = element.prop("attributes");
  //alert(attributes.length);
  input = element.find("input");
  resetValue = false;
  angular.forEach(attributes, function(e) {
    if (e.name !== "class") {
    	input.attr(e.name, e.value);
    }
    if (e.name === "date-format") {
    	dateFormat = e.value;
    }
    if(e.name === "date-view-mode") {
    	dateViewMode = e.value;
    }
    if(e.name === "date-min-view-mode") {
    	dateMinViewMode = e.value;
    }
    if(e.name === "default-date") {
    	defaultDate = e.value;
    }
    if(e.name === "textlabel") {
    	textLabel = e.value;
    }
  });
  
  
  //$element.find(".input-group").append($transclude());
  // date
  //$compile(element.contents())($scope);
	//alert(element.contents());
	//alert($transclude());
  
  $scope.$watch(attr.language, function(value) {
    var language;
    language = value ? value : input.attr("language");
    return input.datetimepicker({
      language: language,
      pickTime: false,
      format: dateFormat,
      viewMode: dateViewMode,
      minViewMode: dateMinViewMode,
      defaultDate: $scope.loandefaultdate,
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down"
      }
    });
  });
  
  
  element.find(".input-group-addon").on("click", function(e) {
    return element.find("input").focus();
  });
  
  //element.find(".input-group-addon").innerHTML = textLabel;
  
  /*element.find("input").on("blur",function(e){
  	var x = "foo = 5";
  	eval(x)
  	alert(foo);
  });*/

  element.on("change.dp", function(e) {

    return $scope.$apply(function() {
      var i, obj, objPath, path, _i, _len, _results;
      if (e.date) {
        objPath = attr.ngModel.split(".");
        obj = $scope;
        _results = [];
        for (i = _i = 0, _len = objPath.length; _i < _len; i = ++_i) {
          path = objPath[i];
          if (!obj[path]) {
            obj[path] = {};
          }
          if (i === objPath.length - 1) {
            if (resetValue) {
              resetValue = false;
              _results.push(obj[path] = null);
            } else {
            	//e.date.viewMode(dateViewMode);
            	_results.push(obj[path] = e.date.format(dateFormat));
            }
          } else {
            _results.push(obj = obj[path]);
          }
        }
        return _results;
      }
    });
  });
  
  $scope.$watch(attr.ngModel, function(newValue, oldValue) {
	
  	if (oldValue && !newValue) {
		
    	// return resetValue = true;
    	return resetValue = true;
    }
	
    // customized
  	if (attr.ngModel == "dateOneTimePaymentList[onetimepayment]") {
  		if (newValue) {
	  		var da1 = new Date("1 " + newValue);
			var da2 = new Date("1 " + $scope.loanstartdate);
			var da3 = new Date("1 " + $scope.payoffdate)
			// return da1 < da2;
			element.find("input[type=text]").filter(":visible:first").attr("style","color: black")
			if (da1 < da2 || da1 >= da3) {
				element.find("input[type=text]").filter(":visible:first").attr("style","color: red")
				// alert(da1);
				// element.find("input[type=text]").filter(":visible:first").val("need > or = Loan Start Date");
				//attr.ngModel = "need > or = Loan Start Date";
				// $scope.dateOneTimePaymentList[onetimepayment] = "need > or = Loan Start Date";
				// alert($scope.dateOneTimePaymentList[""])
			};
		};
  	};
  });
  
  
  //return $compile(input)($scope);
  //return $compile(element.contents())($scope);
  $compile(element.contents())($scope);
 // transclude($scope.$parent, function (clone, $scope) {
//	element.children().append(clone);
  //});
}

}; }]); `

and this is code declared in html page:

<ng-bs3-datepicker id="dateAdditionalYearly" data-ng-model="dateAdditionalYearly" date-min-view-mode="months" date-view-mode="months" date-format="MMM" language="en-ca" textlabel="&nbsp;"> <button type="button" class="btn disabled btn-sm" > <span class="glyphicon glyphicon-repeat"></span> </button> </ng-bs3-datepicker>