Javascript example

HTML

<div ng-app="myApp">
  {{name1}}
  <input type="text" ng-model="name1" />  
  <div ng-controller="myAppController">
    {{name2}}
    {{name}}
    <input type="text" ng-model="name2" />
    <my-app-directive>Sachin {{name2}}</my-app-directive>
    Other Text
  </div>
</div>

JavaScript

var objApp = angular.module("myApp", []);
objApp.controller("myAppController", 
									function($scope)
                  {
                  	$scope.name2="temp";
                  });

objApp.directive("myAppDirective",
									function(){
                  	return {
                    	template : "<div style='background-color:red'>Hello {{name}}<div ng-transclude></div></div>",
                      scope : true,
                      transclude : true,
                      controller : function($scope)
                      {
                      	$scope.name = "tempController";
                      },
                      //replace : true,
                    	compile : function(tElem, attrs, transcludeFn)
                      {
                      	if (transcludeFn)
                      		;//console.log("Compile : " + transcludeFn(scope));
                      		//tElem.html("Hello {{name}}");
                        return function(scope, iElem, attrs, transcludeFn)
                        {
                        	//scope.name = "TEMPOO"
                        	console.log(iElem.html());
                          if (transcludeFn)
                          	;//console.log("link " + transcludeFn(scope));
                          //iElem.html("<div ng-show='false'>" + iElem.html() + "</div>")
                        }
                      }
                    }
                  })