title: Angularjs/Jquery data()
body: <p>How to attach arbitrary data to an html element declaratively, and retrieve it.</p>
  
  <p>Please see the code. <a href="http://plnkr.co/edit/sePv7Y?p=preview" rel="nofollow">http://plnkr.co/edit/sePv7Y?p=preview</a></p>
  
  <p>Angular has the jQuery data() <a href="http://docs.angularjs.org/api/angular.element" rel="nofollow">support</a>.</p>
  
  <p>So, I want to attach data to each <code>li</code> element (say _data = node ) in the template, and later on to retrieve it using </p>
  
  <pre><code>var li = elm[0]....
  console.log('li-', li.data('_data'))
  li - {id:1}
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>'use strict';
  
  var app = angular.module('Directives', []);
  
  app.controller('MainCtrl', function ($scope) {
     $scope.data = [
                      {id:1}, {id:2}, {id:3}
  
          ];
  });
  
  
  app.directive('test', function ($timeout) {
    return {
        template: '&lt;li class="ch" ng-repeat="node in data"&gt;' +
                  '&lt;span class="span2"&gt;' + 'id - {{node.id}}' + '&lt;/span&gt;' +
                  '&lt;/li&gt;',
              restrict: 'A',
              link: function (scope, elm, attrs) {
                  console.log(elm[0].children);
              }
      };
  });
  </code></pre>
  
  <h2>Edit:</h2>
  
  <p>Updated the code with how I like to set data.</p>
  
  <pre><code> template: '&lt;li class="ch" ng-repeat="node in data"  data-node="node"&gt;' +
  </code></pre>
  
  <p>couldn't select the li element properly now to see whether it is working
  tried,</p>
  
  <pre><code>elm[0].children[0].data()
  elm.children[0].data()
  etc..
  </code></pre>