css - angular js dom manipulation with directives -

i trying use angular directives dynamically replace html portion of portlet of page.

the html portlet has 2 sections embedded. top part has heading obtained different backend service

<div class="headerdiv"> <h3 class='headerclass'> <a href="">object heading</a> </h3> </div> 

the content loaded in different section

<div id="objectdiv" ng-controller="objectctrl">    <div ng-show="object.title" mydirective><b>{{object.title}} </b></div>     <div element-trigger><b>{{object.name}} </b></div>    <div element-trigger><b>{{object.description}} </b></div>   </div> 

the controller loads details successfully

the new directive added

  app.directive('mydirective', function(){         return function(scope, elem, attrs){         //obtain old header     var oldheader = angular.element( '.headerdiv .headerclass' );      //get new header      //replace old header new header       }  }); 

i need dynamically change heading in headerdiv object.title value . note new directive bound filed listening object.title div.

i dont think right use of directive, directive should used affect functionality of element on defined in of cases.

what can try in objectctrl define watch on title property, , broadcast message

$scope.$watch('object.title',function(newvalue) {    $rootscope.$broadcast('titlechanged',newvalue);  //you can pass object }); 

if header contained inside controller catch event

$scope.$on('titlechanged',function(args) {     //code handle title update }); 

the html header should have binding expression title

<div class="headerdiv"> <h3 class='headerclass'> <a href="">{{title}}</a> </h3> </div> 

note: not sure structure of html not required if header , content inside objectctrl using same\shared model (object).