Is there a way to pass data from `ng-repeat` to other element conditionally?

Question

I am looping over an array, by the conditional I am finding a value. But how to pass that conditional value to another element?

Example :

<h1>{{title}}</h1> //how to get here?
<ul class="naviPrCatgInfo">

    <li ng-repeat='subProject in viewProject.SubProjectIds' ng-class="{'selected' : subProject.Id === subProjectId;}" > //how to pass?
        <a ng-class="subProject.Name | trimSpace" ng-href="" ng-click='changeSubProCat(subProject)'>
            {{subProject.Name}} {{subProject.Id}}
        </a>
    </li>

</ul>

Answer 1

Don't declare the new variable inside ng-repeat , because that will get added inside the child scope created by the ng-repeat .

You need to keep subProjectId outside the ng-repeat scope so that could be available inside the controller, you need to use $parent anotation to place that variable inside the controller scope rather than the ng-repeat .

So you can easily filter viewProject.SubProjectIds on the basis of subProjectId and show the title element there.

Markup

<h1>{{(viewProject.SubProjectIds| filter: {Id: subProjectId}: true)[0].Name}}</h1>
<ul class="naviPrCatgInfo">
    <li ng-repeat='subProject in viewProject.SubProjectIds' ng-click="$parent.subProjectId = subProject.Id"
       ng-class="{'selected' : subProject.Id === subProjectId}">
        <a ng-class="subProject.Name | trimSpace" ng-href="" ng-click='changeSubProCat(subProject)'>
           {{subProject.Name}} {{subProject.Id}}
        </a>
    </li>
</ul>