Update directive's templateurl's content binding on scope's property change

Question

So what I am basically trying to do is make a reusable component in angularjs using directive. This directive will be a different app module(say 'childApp'). I am injecting this module and its dependency into my main app module. I am placing this directive in my main app's(say mainApp) module. What this directive does is it takes data from mainApp's controller and creates an isolate scope in the directive. From the link function it calls childApp's service and returns a html response and attaches it to isolate scope as say scope.htmlresponse<--(htmlresponse comes as an array). I also have a templateurl defined in the directive which has this code.

templateUrl:

<ul class="nav navbar-nav">
  <li>
    <a href="" ng-click="doSomething()">
      <i class="icon"></i>SomeOperation</a>
  </li>
 </ul
 <div class="container" style="overflow-x:auto;" ng-bind-html="htmlresponse[0].htmlContent">

The binding takes place and the htmlresponse gets rendered in the templateurl.

The problem starts here:.

I also have ul li elements in the templateUrl to perform different operations as you can see in the above templateUrl's code.

I have the link defined as such:

 link: function(scope, element, attrs){
    init();  /*--**This was first call I was talking about in my question above which was returning htmlresponse**--*/
   scope.doSomething = function(){
   /*--** Makes a service call and this also returns an html response**--*/
  //example service code similar to my code
     childAppService.makeSecondServiceCall(scope.document).then(function(htmlresponse)       
     {
      renderHtml(htmlresponse);
     });
   }
 function renderHtml(responseData){
    console.log(responseData);
    if(responseData.status == 200)
      scope.htmlresponse = responseData.data;  
   }
 }

Exact Issue:
I can see the responseData as desired in console but scope.htmlresponse = responseData.data; is not updating the template url with new htmlresponse. Do I need to do something else to update the binding in templateUrl? I have tried a few things from googling but It doesn't help. If anyone has encountered any such issue please guide me as to how to solve this. Thanks!

Answer 1

I have finally found the answer, however I still don't the reason. In my question I had mentioned an init(); function inside which I was setting scope.htmlResponse = []; so basically every service has .then() as

.then(function(htmlresponse)       
 {
  renderHtml(htmlresponse);
 }); 

which makes them go through renderHtml(hmtlresponse) where I am setting

 if(responseData.status == 200)
  scope.htmlresponse = responseData.data;  

I changed this to something like this:

 if(responseData.status == 200){
  scope.htmlresponse = [];
  scope.htmlresponse = responseData.data;    
 }

this actually made the template url div to update the binding hence the content. Strange!