[SOLVED] AngularJS $scope issues in tabset

AngularJS $scope issues in tabset

I have a problem trying to watch in my controller a collection generated by a filter in the view.

I store the filtered data in a variable :

 <table class="table">
     <tr ng-repeat="item in filteredCollection = (myCollection | filter: txtSearch)">
         <td ng-bind="item"></td>
     </tr>
 </table>

and I would like to subscribe to changes of 'filteredCollection ' in my controller :

$scope.$watchCollection('filteredCollection', function() {
    if (typeof($scope.filteredCollection) != 'undefined')
        console.log('Results changed : ' + $scope.filteredCollection.length);
});

I have set up this JSFiddle to show you my issue : my watch function is never called.

Fun Fact, it works when I remove all the <tabset> <tab> tags in my HTML. I think I messed up with the $scope, but I don't get why. Maybe the tabset create a new $scope child or something.

I hope you guys will find out what is going on here,

Cheers

Solution

Try to put filteredCollection in an object, so the it will change the correct scope property:

$scope.obj = { filteredCollection : [] };
$scope.$watchCollection('obj.filteredCollection', function(newVal) {
    if (typeof($scope.obj.filteredCollection) != 'undefined')
        console.log('Results changed : ' + $scope.obj.filteredCollection.length);
});

In the HTML:

<tr ng-repeat="item in obj.filteredCollection = (myCollection | filter: txtSearch)">

See this fiddle.