title: AngularJS Directive with no Template and Sharing the updates from parent scope
body: <p>I have a very simple requirement where a directive is placed inside a <strong>ng-repeat</strong> in this I wanted to push down the changes to directive so it updates the UI. Meaning I want the value of <strong>Contact(not just a string reference actual object)</strong> inside my link function so I can render the UI and also change my UI when <strong>contact</strong> changes in the parent <strong>ng-repeat</strong>. </p>
  
  <p>I had created a very <strong><a href="http://jsfiddle.net/NDFHg/54/" rel="nofollow noreferrer">simplified version</a></strong> of what I wanted to achive. It has a list of Contacts ( After researching with help of this <strong><a href="https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482">link by Mark</a></strong> I know <strong>ng-repeat</strong> creates its own scope so I added an object called deep which is an object not primitive) , I am struggling to get this sorted. I also had tried to use other possible option. I dont want to paste a template in directive with <strong>ng-show/ng-class</strong> stuff because business logic is but tricky so it is easier to do it using link function. I am sure this has to do with <strong>scope and/or $observe</strong> but I dont know how to get this sorted. Also note this is a simpler version of what I wanted to achieve. I actually want value of that object to render my UI.</p>
  
  <p><strong><a href="http://jsfiddle.net/NDFHg/54/" rel="nofollow noreferrer">My Fiddle Example</a></strong> You will see when you click on Update Name outer repeat gets updated no the inner.</p>
  
  <pre><code>&lt;div&gt;
    &lt;div ng-controller="ContactsCtrl"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="contact in contacts"&gt;
              &lt;div zippy="contact"&gt;a&lt;/div&gt;            
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;br /&gt;
      &lt;p&gt;Here we repeat the contacts to ensure bindings work:&lt;/p&gt;
      &lt;br /&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="contact in contacts"&gt;
              {{contact.name}} : {{contact.deep}}
          &lt;/li&gt;
      &lt;/ul&gt;    
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  var app = angular.module( 'myApp', [] );
  app.controller('ContactsCtrl', function ( $scope ) {      
      $scope.contacts = [
                          { name: 'Sharon',deep:{A:"a"}},
                          { name: 'Steve',deep:{A:"b"}},
                          { name: 'Scott',deep:{A:"c"}}
      ];
  
      $scope.primitiveTest=function(c){c.name=c.name+c.name; }    
      $scope.objectTest=function(c){c.deep={A:c.deep.A+c.deep.A};  }
  });
  app.directive('zippy',  ['$compile', function ($compile){
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {       
  
            /*scope.$watch(attrs.zippy, function(newValue, oldValue){
                  alert('asd');
              });
  
            attrs.$observe('deep',function(val){ alert('asd'); });*/
          scope.$watch(attrs['zippy'],
               function (ideaNode) {      
                   var html = [];
                   html.push('&lt;hr/&gt;&lt;div class="clearfix" id="vote-icons" ng-click="primitiveTest('+attrs['zippy']+');" &gt;Update Name &lt;/div&gt; - &lt;div class="clearfix" id="vote-icons" ng-click="objectTest('+attrs['zippy']+');"&gt;UpdateObject');              
                   html.push('&lt;/div&gt;');
                   html.push(JSON.stringify(ideaNode));                
                   element.html(html.join(''));
                   $compile(element.contents())(scope);
               }
          );
        }
      }
    }]);
  </code></pre>