Simplify repeated scope attributes in angularjs -

i found myself repeating following structure , i'd simplify it:

<container>   <clock property="data"></clock>   <calendar property="data"></calendar>   <alert property="data"></alert> </container> 

with relative directive

app.directive('clock', function(){   return {     restrict: 'e',     scope: {       'property': '='     }   } }); 

how remove property="data" each item , move @ container level?

you can set property="data" in parent directive , make available through controller

your container directive

<container property="data">  app.directive('container', function(){   return {     restrict: 'e',     scope: {       'property': '='     },     controller: function($scope){       this.getdata = function(){         return $scope.property;       }     }   } }); 

and child directive

<clock></clock>      app.directive('clock', function(){   return {     restrict: 'e',     require: '^container',     link: function(scope, elm, attrs, containerctrl) {       console.log(containerctrl.getdata());     }           } }); 

require parent directive , call it's associate method containerctrl.getdata() required value.

check demo