AngularJS : How to access scopes created by ng-repeat?

Question

I have the following:

<ul>
    <li class="faders" ng-repeat="f in faderlist | faderFilter:from:to">
        <br/><button ng-click="record(f)">Record new setting</button>
        <input ng-model="myname" type="text">
    </li>
</ul>

In the record function, I want to: 1) Access myname 2) Reset myname to some value.

For 1), I can easily get it by passing ng-click="record(f,myname)

But for 2), I'm really annoyed. The ng-repeat do create "inner scopes". How can I access those ? I have try to pass $scope to record but it's not working...

Any ideas ?

Answer 1

Inner ng-repeat scope creates property myname. You cannot pass this property by reference to outer scope. But you can wrap this property with an object and pass it instead. It would make sense to define this property on f, e.g.:

<ul>
    <li class="faders" ng-repeat="f in faderlist | faderFilter:from:to">
        <br/><button ng-click="record(f)">Record new setting</button>
        <input ng-model="f.myname" type="text">
    </li>
</ul>

$scope.record = function(f) {
  f.myname = "newValue";
}

This allows you to modify myname for all faderlist objects in outer scope and inner scope values will update themselves automatically. If you do not want to modify existing f object, you can create a new one:

<ul>
    <li class="faders" ng-repeat="f in faderlist | faderFilter:from:to">
        <br/><button ng-click="record(f, wrapper)">Record new setting</button>
        <input ng-model="wrapper.myname" type="text">
    </li>
</ul>

$scope.record = function(f, wrapper) {
  wrapper.myname = "newValue";
}