Combine ng-repeat and ng-click

Question

I am building an angularJS app using ng-repeat and ng-click on the same element. I have an array of items which I run through to create a list of buttons. Each one of these items has a property category which I'd like to pass as an argument for an ng-click action.

So far I have used the following code:

<button type="button" class="btn btn-default" ng-repeat="job in jobs" ng-click="filterJobListings(job.category)">
    {{ job.category }}
</button>

However, the generated HTML is as follows:

<button type="button" class="btn btn-default ng-scope ng-binding" ng-repeat="job in jobs" ng-click="filterJobListings(job.category)">Design</button>

How can I pass the argument correctly here?

Thanks a lot,

Cheers

Answer 1

EDIT I was wrong, ng-click="filterJobListings({{job.category}})" is not the solution

I believe you're doing it correctly. This could be an issue with prototypical inheritance. Remember, that ng-repeat creates its own scopes that might not apply their changes to the parent scope(s).

See my fiddle that works. Notice I'm using and object to store the selected category $scope.obj.cat=i; . It wouldn't work if I used a primitive.

http://jsfiddle.net/nicolasmoise/hwH64/