Can't able to track table row using ng-repeat-start(ngAnimate) to expand

Question

I want to track the expanded row and save that form with city and work details, the problem is while clicking on the particular row it's expanding with form but I can't able to track that row...

var app = angular.module('app', ['ngAnimate']);

app.controller('itemsController', function( $scope ) {

$scope.divisions    = [{id:12, div_name:' city1'},
                      {id:13, div_name:' city2'},
                      {id:14, div_name:' city3'}];

$scope.works        =[{wid:111, w_name:'work1'},
                     {wid:222, w_name:'work2'},
                     {wid:333, w_name:'work3'}];
});

html

<div ng-controller="itemsController" class="box">

<table border="1">
    <tbody ng-repeat-start="division in divisions">
        <td>
            {{division.div_name}}
            <em>{{expanded}}</em>
        </td>
        <td>Values: {{divisions.length}}</td>
        <td>
            <button type="button" ng-click="expanded = !expanded">
                Expand
            </button>
        </td>
    </tbody>
    <tbody ng-repeat-end ng-show="expanded">
        <td colspan="3">

             <select ng-model="result.division.tt">
               <option value='01'>tt1..........</option>
               <option value='02'>tt2..........</option>
             </select><br/><br/>
                <ul ng-repeat="work in works">
                   {{work.w_name}}  <input type=text />                                
                </ul><br/><br/>
                 <button ng-click="save()">save</button>
        </td>
    </tbody>
</table>{{result |json}}

link - http://jsfiddle.net/raju10281/eqk6attx/18/

Thank You in advance!!!

Answer 1

Try this solution. You should create object(ng-init='data={}') for each ng-repeat. It will present content of each form, then you can use it inside your controller(ng-click="save(division, data)") with appropriate division:

<tbody ng-repeat-end ng-show="expanded" ng-init='data={id:division.id,div_name:division.div_name,works:[]}'>
    <td colspan="3">

         <select ng-model="data.tt">
           <option value='01'>tt1..........</option>
           <option value='02'>tt2..........</option>
         </select><br/><br/>
            <ul ng-repeat="work in works" ng-init='data.works[$index]={wid:work.wid,w_name:work.w_name}'>
               {{work.w_name}}  <input type=text ng-model='data.works[$index].input' />
            </ul><br/><br/>
            <button ng-click="save(division, data)">save</button>
    </td>
</tbody>