How to iterate over 2 scopes with ng-repeat

Question

If I have 2 scopes that share a common Person code value, can I link them in the view perhaps using ng-repeat? I suppose what I'm trying to do is something similar to nested for loops. I'd like to iterate through one scope whilst checking the other for matching person codes and then display a different button if the person code exist in second scope.

<div ng-repeat="x in model.data | filter: cc.course_code | filter: occ.occurrence | filter: tgn.tutor_group_name | orderBy: 'surname'  | unique: 'PERSON_CODE'" ng-model="x">
  <h4><b>{{ x.forename }} {{x.surname}}</b>  ID: {{x.PERSON_CODE}}</h4>
  <h5>{{x.course_name}}</h5>
  <h5>{{ x.faculty_name }} {{x.area_code}}   </h5>
  <h5>{{x.area_name}}</h5>
  <h5>{{x.tutor_group_name}}</h5>
  <div ng-repeat="d in destinations.data" ng-model="d">
    <div ng-if="(x.PERSON_CODE === d.PERSON_CODE)">
      <div ng-show="d.EMP_DEST_CODE" class="pull-right">
        <a href="#myModal" type="button" class="btn btn-success butt-sz ladda-button" data-target="#myModal" data-toggle="modal" ng-click="editStudent(x.PERSON_CODE);">
          <span class="glyphicon glyphicon-pencil"></span> Edit Destination
        </a>
      </div>
    </div>
  </div>
  <div ng-show="(!d.EMP_DEST_CODE)" class="pull-right">
    <a href="#myModal" type="button" class="btn btn-warning butt-sz ladda-button" data-target="#myModal" data-toggle="modal" ng-click="editStudent(x.PERSON_CODE);">
      <span class="glyphicon glyphicon-plane"></span> Record Destination
    </a>
  </div>
</div>

I tried the above way but that isnt working at all right.

I would like the green button to appear if there is a corresponding entry in the destinations scope and if there is not Id like the green button displayed.

Answer 1

I would recommend to write a function in controller that checks if the passed entry is in destinations like this:

$scope.isDestination = function(p) {
    for(var i = 0; i < $scope.destinations.data.length; i++) {
        if(p.PERSON_CODE == $scope.destinations.data[i].PERSON_CODE) 
            return true;
    }
    return false;
}

Considering this function, you can display conditionally your buttons without ng-repeating over the destinations array:

<div ng-repeat="x in model.data | filter: cc.course_code | filter: occ.occurrence | filter: tgn.tutor_group_name | orderBy: 'surname'  | unique: 'PERSON_CODE'" ng-model="x">
  ...

  <div ng-if="isDestination(x)"> <!-- isDestination returns true -->
    <a href="#myModal" type="button" class="btn btn-success butt-sz ladda-button" data-target="#myModal" data-toggle="modal" ng-click="editStudent(x.PERSON_CODE);">
      <span class="glyphicon glyphicon-pencil"></span> Edit Destination
    </a>
  </div>

  <div ng-if="!isDestination(x)"> <!-- isDestination returns false -->
    <a href="#myModal" type="button" class="btn btn-danger butt-sz ladda-button" data-target="#myModal" data-toggle="modal" ng-click="editStudent(x.PERSON_CODE);">
      <span class="glyphicon glyphicon-plane"></span> Record Destination
    </a>
  </div>
</div>