AngularJS: Access the scope for a rendered DOM element

This trick might be useful to implement more complicated directives in AngularJS. I needed it to do drag'n'drop in a hierarchical tree.

Let's say you have this $scope in your Angular controller:

Copy$scope.tasks = [
  { 'text': 'Task 1' },
  { 'text': 'Task 2' }
]

And you have this template:

Copy<ul ng-repeat="task in tasks">
  <li>
    {{task.text}}
  </li>
</ul>

Which renders this HTML:

Copy<ul>
  <li>Task 1</li>
  <li>Task 2</li>
</ul>

If you'd like to access the scope bound to the second <li> you can say this in jQuery:

Copyvar li = $('li:eq(1)');
li.scope().node // => { 'text': 'Task 2' }

Or if you'd like to access the entire list:

Copyli.scope().parent.node // => [{ 'text': 'Task 1' }, { 'text': 'Task 2' }]