javascript - Anguarjs Directive at Form Level, accessing all fields and checking for validation -

in form (itemselectionform), rendering multiple tables ng-repeat. , in each table have radio buttons have names appended index. now, want write angular js directive (selectatleastoneitemtoreturn) put on form (with select-atleast-one-item) form validation based on children tables radio button. now, don't know how access children tables radio buttons , values in directive can write validation code. and, if radio buttons value changes want validation again , again. , if form invalid , next button disabled. html below.

<div class="panel-group" data-ng-form="itemselectionform" select-atleast-one-item>    <div class="panel panel-default" data-ng-repeat="item in items">      <div class="panel">        <div class="panel-body">                   <table class="table table-bordered">              <thead>                <tr>                  <th>action</th>                  <th>item description</th>                </tr>              </thead>              <tbody>                <tr>                  <td>                    <label>                    <input type="radio" name="inputradios{{$index}}" value="option 1"  data-ng-model="item.action" required/>                    </label>                  </td>                  <td>{{item.description}}</td>                </tr>                <tr>                  <td>                    <label>                    <input type="radio" name="inputradios{{$index}}" value="option 2" data-ng-model="item.action" required/>                    </label>                  </td>                  <td colspan="2">option 2</td>                </tr>                <tr>                  <td>                    <label>                    <input type="radio" name="inputradios{{$index}}" value="option 3" data-ng-model="item.action" required/>                    </label>                  </td>                  <td colspan="2">option 3</td>                </tr>              </tbody>            </table>        </div>      </div>    </div>  </div>    <div class="right">        <button type="submit" class="btn green-button left space-left" data-ng-disabled="itemselectionform.$invalid" data-ng-click="goforward()">next</button>  </div>

easiest pass down form object directive, , put $watch on property need, $error in case - although i'm not clear on you're trying achieve actually...

js:

var app = angular.module('myapp', []);   app.controller('myctrl', function($scope, $log){     $scope.items = [         {             action: 'fooaction',             description: 'foo'         },         {             action: 'baraction',             description: 'bar'         }     ]; });     app.directive('selectatleastoneitem', function(){     return {         restrict: 'a',         scope: {             frm: '=selectatleastoneitem'         },         link: function(scope, element, attrs){             scope.$watch('frm.$error', function(newval, oldval){                 console.log(newval);             }, true);         }     } }); 

html:

<div ng-app="myapp">     <div ng-controller="myctrl">         <div ng-form="itemselectionform" select-atleast-one-item="itemselectionform">             <div ng-repeat="item in items">                 {{item.description}}                 <input type="radio" name="inputradios{{$index}}" ng-model="item.action" required>             </div>     </div> </div> 

fiddle: http://jsfiddle.net/dwkmy20j/1/

hopefully gets going bit.