AngularJS - Getting a ng-repeated DOM element's data model

Question

This seems super simple. but I can't figure out how its supposed to work.

I have a unordered list of items, which are built from an ng-repeat, which itself is based on a collection of data objects.

So in the DOM (in Jade):

  div#projectListing
    ul.sidebar-listing
      li.sidebar-header Theatrical Projects
      li.sidebar-item(ng-click="loadProject()", ng-repeat="project in theatricalProjects | orderBy:'title'") {{ project.title }}

Now I have a nice listing of items in my sidebar, but I want to be able to click one of these elements, and get the full model its tied to - project. What is the 'angular' method to handle this? Do I need to create a custom directive instead of using ng-click()? Do I need to assign an ng-model to each listing with a unique name?

Thanks.

Answer 1

I am assuming you need the respective project inside loadProject when clicked. You could just pass in the project as an argument to loadProject and accept it in your function definition:

li.sidebar-item(ng-click="loadProject(project)", ng-repeat="project in theatricalProjects | orderBy:'title'");

Basically ng-repeat will create a child scope for all the repeated element ( li.sidebar ) so all of those child scope will have the propery project associated to them and also from inside the method loadProject() you should be also able to access it using this.project