Angularjs ng-repeat hide/show

Question

I have a table where I am using ng-repeat to replicate a series of 4 checkboxes. When the user selects one of the "OAuth2" check boxes in subsequent table rows I need to show a div which is outside the table. I have tried using ng-model="OAuth2" and then using ng-show="OAuth2" for the div outside of the table but it does not work. (It works fine if the div is inside the table),

//Here's the HTML
<table class="table table-striped" width="100%" border="0">
        <thead align="center">
          <tr align="center">
            <th width="15%">Environment</th>
            <th width="16%">Datacenter 1</th>
            <th width="16%">Datacenter 2</th>
            <th colspan="2">Auth Protocol</th>
            <th colspan="2">socketTimeout</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="route in routes">
            <td><select class="form-control" ng-model="route.environ" >
                <option>E2E</option>
                <option>PERF</option>
                <option>PROD</option>
                <option>STAGE</option>
                <option>PDS</option>
                <option>QAL</option>
              </select></td>
            <td><select ng-model="myDataCenter1">
                <option ng-repeat="datacenter1 in datacenter1s" value="{{datacenter1.value}}" ng-selected="datacenter1.value == myDataCenter1">{{datacenter1.name}}</option>
              </select></td>
            <td><select ng-model="myDataCenter2">
                <option ng-repeat="datacenter2 in datacenter2s" value="{{datacenter2.value}}" ng-selected="datacenter2.value == myDataCenter2">{{datacenter2.name}}</option>
              </select></td>
            <td width="16%"><div class="checkbox">
                <label>
                  <input type="checkbox" value="">
                  <small> PrivateAuth</small></label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="">
                  <small> BrowserAuth</small></label>
              </div></td>
            <td width="12%"><div class="checkbox">
                <label>
                  <input type="checkbox" value="">
                  <small> SimpleAuth</small></label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="" ng-model="OAuth2">
                  <small> OAuth2</small></label>
              </div></td>
            <td width="10%"><input class="form-control" type="text" value="5"/></td>
            <td width="13%">secs</td>
            <td width="2%"><a href="javascript:void(0);" ng-click="removeRoute(route)">X</a></td>
          </tr>
          <tr>
            <td colspan="8" align="right"><a href="javascript:void(0);" ng-click="addRoute()">+ ADD MORE</a></td>
          </tr>
        </tbody>
      </table>
      <div ng-show="OAuth2">Show this content</div>



     //Here's the JavaScript
     /* ROUTES -  Datacenter section to populate table and add remove routes */
    $scope.routes = [
        {environ:'E2E', data1:'',data2:'',auth:'',socket:''},
        {environ:'PERF', data1:'',data2:'',auth:'',socket:''},
        {environ:'PROD', data1:'',data2:'',auth:'',socket:''}
    ];

    $scope.addRoute = function() {
        this.routes.push({environ:'', data1:'',data2:'',auth:'',socket:''});
    };

    $scope.removeRoute = function(routeToRemove) {
        var index = this.routes.indexOf(routeToRemove);
        this.routes.splice(index, 1);
    };

Answer 1

ng-repeat creates a child scope. When you set the value checked, that is only present on the child scope and you can't see it outside. Create an object in your parent scope called data or something and use data.checked as your value. The data object will be inherited by the child scope and you can use the value in the parent.

If you just use checked on the parent scope it will inherit, but as soon as you set the value in the child scope it breaks the inheritance (fiddle)