ng-show does not update in a ng-repeat loop - angularjs

Question

I have some hierarchical data (some kind of a tree view) that represents an organization chart. I want to show this in a table. I did the following:
<tr ng-repeat="dat in vm.refined" ng-show="dat.show || dat.parent==null">
<td ng-click="vm.toggleShow(dat)" style="cursor: pointer">
<span ng-class="(dat.show===true || dat.parent===null) ? 'glyphicon glyphicon-chevron-right' : 'glyphicon glyphicon-chevron-down'" ></span>
{{dat.value.rbsName}}
</td>
<td>{{dat.parent}}</td> <!-- ignore these two tds -->
<td>{{dat.members}}</td> <!-- ignore these two tds -->
</tr>
vm.refined is an array of objects, defined in the controller which has the name of the unit, its parent (if any, else null) and a show flag to simulate the collapse/expand.
toggleShow() responsibility is to... toggle the show flag in the selected (which will be shown anyway due to being parent) and to its children. So I do something like:
vm.toggleShow=function(dat) {
dat.show=!dat.show;
for(var i=0; i< vm.refined.length; i++) {
if(vm.refined[i].parent==dat.parent)
vm.refined[i].show=!vm.refined[i].show;
}
};
Thing is that when I click the td, toggleShow is called but I will not see the rows I am supposed to see. It seems like a scope issue and ng-repeat but I cannot find a solution around. Can you help? Oh and something else, do you feel it would be better if I write this part as a directive?

Answer 1

Basically you are toggling function is doing nothing. At the start of the function it is toggling flag & then you are looping through the array & when it found you are toggling that flag. By doing that your value is true the it became true only, Nothing will be change in value.
I think you should toggle that flag on html itself
Markup
<tr ng-repeat="dat in vm.refined" ng-show="dat.show || dat.parent">
<td ng-click="dat.show=!dat.show" style="cursor: pointer">
<span ng-class="(dat.show || dat.parent) ? 'glyphicon glyphicon-chevron-right' : 'glyphicon glyphicon-chevron-down'" ></span>
{{dat.value.rbsName}}
</td>
<td>{{dat.parent}}</td> <!-- ignore these two tds -->
<td>{{dat.members}}</td> <!-- ignore these two tds -->
</tr>