Pass ng-repeat variable to javascript function

Issue

I'm trying to pass the key value to a javascript function inside an ng-repeat but it's not working

<ul class="m-list">
    <li ng-repeat="(key,store) in brand.storesInfo">
            <a onclick="save_key({{ key }})"
                    href="{{ store.url }}" target="_blank">
                    <img src="{{ store.icon }}"/>
            </a>
    </li>
</ul>   

save_key it's not an angular controller function

Solution

In angularJS you use ng-click rather than onclick and pass the reference directly rather than interpolated

<ul class="m-list">
    <li ng-repeat="(key,store) in brand.storesInfo">
            <a ng-click="save_key(key)"
                    href="{{ store.url }}" target="_blank">
                    <img src="{{ store.icon }}"/>
            </a>
    </li>
</ul>   

As @charlietfl suggests below - if save_key() exists outside of the angular app, then you could connect it through the controller with

$scope.save_key = save_key

This would associate the scoped ng-click function with the page function function save_key(...

However, it seems cleaner to me to keep it all in the AJS ecosystem, in which case you would handle all the logic internally with your controller/service etc

$scope.save_key = function (key) {
   //...
}

Answered By - Kinglish