title: Watch is not working inside a custom attribute directive used inside another custom element directive
body: <p>I have two directives which implement independent functionality. I am trying to use the attribute directive inside an element directive, but watch is not working on the attribute directive. Here's the jsfiddle link : <a href="http://jsfiddle.net/hsyR5/8/" rel="nofollow">http://jsfiddle.net/hsyR5/8/</a></p>
  
  <p>I want the isLoaded directive watch to be triggered whenever is-loaded attribute value is changed.</p>
  
  <p>Html: </p>
  
  <pre><code>&lt;div ng-app="myapp"&gt;    
      &lt;div ng-controller="ReportCtrl"&gt;
          &lt;mydir is-loaded="false" id="change" expand-me="isExpanded" ng-transclude&gt;
              &lt;button ng-click="expandIt()"&gt; Expand&lt;/button&gt;
          &lt;/mydir&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Javascript code:</p>
  
  <pre><code>var myApp = angular.module('myapp', [])
  myApp.directive('mydir', function () {   
      return {
          restrict: 'E',
          scope : {
              expandMe:'='
          },
          replace: true,
          transclude: true,
          template : "&lt;div&gt;&lt;/div&gt;",
          link: function (scope, element, attrs) {
              scope.$watch('expandMe', function (){
                  //load the data
                  console.log('inside mydir directive');
                  element[0].attributes['is-loaded'].nodeValue = ''+scope.expandMe;
              });
          }
      };
  });
  
  myApp.directive('isLoaded', function () {
      return {
          restrict : 'A',
          link: function (scope, element, attrs) {
              scope.$watch(attrs.isLoaded, function (){
                  console.log('isLoaded Changed');
              });
          }
      };
  });
  
  myApp.controller('ReportCtrl', function($scope){
   $scope.isExpanded = false;
    $scope.expandIt = function(){
        $scope.isExpanded = !$scope.isExpanded;
    }
  })
  </code></pre>