javascript - How to apply $watchCollection to grid in template(html page) that is included using ng-include in another page? -

i new angularjs.

i have page contains grid filled data.

<table items="personlist" tr-ng-grid page-items="9"    selection-mode="singlerow" selected-items="persongrid"    style="font-size: smaller;"> <thead> <tr>     <th field-name="name" display-name="{{ 'settings_grid_name' | translate }}"></th>     <th field-name="address" display-name="{{ 'settings_grid_address' | translate }}"></th>     <th field-name="age" display-name="{{ 'settings_grid_age' | translate }}"></th> </tr> </thead> <tbody>     <tr>         <td field-name="age">             <div class="text-center">                 <i style="font-size: 21px" class="base-icon {{getdevicestate(griditem.age)}}"></i>             </div>         </td>         <td field-name="address">             <div class="text-center">                 <i style="font-size: 21px" ng-style="getdevicecolor(griditem.id, griditem.status)" class="base-icon {{getdeviceicontype(griditem.address)}}"></i>             </div>         </td>     </tr> </tbody> 

controller code

$scope.$watchcollection('persongrid', function (newval, oldval) {              console.log('working -- new value');             console.log(newval);           }); 

i had applied $watchcollection in controller, when select single row fires $watchcollection event , works fine.

i had use above template in new hmtl page.

 <div class="col-lg-2 col-md-2">     <div ng-include="'settingsmodule/views/settingsmodulevehiclegrid.tpl.html'"></div> </div> 

and code in controller used new html page.

 $scope.$parent.$watchcollection('persongrid', function (newval, oldval) {              console.log('working --');             console.log(newval);         }); 

but event fired when page load first time. after when select row in table grid , event not fired. : (

any help, better solution. may can add data in $rootscope , apply $watch.