Isolated Scope

This is the example for Isolated Scope

by DineshAngappa

HTML

<div ng-app="myModule">
    <div ng-controller="firstCtrl">
        <my-directive name="name"></my-directive>
    </div>
    
    <div ng-controller="secondCtrl">
        <my-directive name="name"></my-directive>
     </div>   
    
</div>

JavaScript

angular.module('myModule',[])
.controller('firstCtrl', ['$scope',function($scope){
    $scope.name ='John';
}]).controller('secondCtrl', ['$scope',function($scope){
    $scope.name ='Smith';
}]).directive('myDirective', [function(){
    return {
        restrict : 'EA',
        scope : {
            'name' : '='
        },
        link: function($scope, elements, attrs){
            $scope.fname = $scope.name;
        },
        template: '<p>Hello {{fname}}<p>'
    };
}])