I am having two custom directives in my angularJS app. One act as a parent and other act as child. I am trying to access parent's scope inside child directive. But I am not getting the desired output.

<div ng-controller=CountryCtrl>

{{myName}}

    <div ng-controller=StateCtrl>

        <state nameofthestate='Tamilnadu'>

            <city nameofthecity='Chennai'></city>

        </state>

    </div>

</div>

and my script looks like

var app = angular.module(sampleApp,[]);

app.controller(CountryCtrl,function($scope){

    $scope.myName = India;

});

app.controller(StateCtrl,function($scope){

});

app.directive(state,function(){return {

    restrict : 'E',

    transclude: true,

    scope : { myName  : '=nameofthestate'},

    template:**   {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>

}});

app.directive(city,function(){return {

    restrict : 'E',

    require:'^state',

    scope : { myName  : '=nameofthecity'},

    template:****   {{myName}} is inside {{$parent.myName}} which is in {{$parent.$parent.myName }}<br/> 

}});

Corresponding JSFiddle available in https://jsbin.com/nozuri/edit?html,js,output

The output which i am getting is

India

** Tamilnadu is inside India

**** Chennai is inside India which is in Tamilnadu

and the expected output is

India

** Tamilnadu is inside India

**** Chennai is inside Tamilnadu which is in India

Can anyone educate me what i am doing wrong here?