Select All Row doesn't work properly with Checkbox

I am using Smart Table for my grid view. I use this Select All Row directive to fill my purposes. It works fine in the given plunker. But in my project it have some problems. When i first click on Select All checkbox, it selects all rows. Then i can unselect all by clicking on select all checkbox again. But after that, when i trying to select all rows using that checkbox i can't select. Whats is the problem ? I have checked $scope.selected, i contains the selected rows oid. But why in view i can't check?

My Select All Directive

'use strict';

define(['app'], function (app) {

    var rowSelectAllDirective = function () {
        return {
              require: '^stTable',
                template: '<input type="checkbox">',
                scope: {
                  all: '=rowSelectAll',
                  selected: '='
                },
                link: function (scope, element, attr) {

                  scope.isAllSelected = false;

                  element.bind('click', function (evt) {

                    scope.$apply(function () {

                      scope.all.forEach(function (val) {

                        val.isSelected = scope.isAllSelected;

                      });

                    });

                  });

                  scope.$watchCollection('selected', function(newVal) {

                    var s = newVal.length;
                    var a = scope.all.length;

                    if ((s == a) && s > 0 && a > 0) {

                      element.find('input').attr('checked', true);
                      scope.isAllSelected = false;

                    } else {

                      element.find('input').attr('checked', false);
                      scope.isAllSelected = true;

                    }

                  });
                }
    }
    };
    app.directive('rowSelectAll', [rowSelectAllDirective]);

});

Select single row directive,

'use strict';

define(['app'], function (app) {

    var rowSelectDirective = function () {
        return {
             require: '^stTable',
                template: '<input type="checkbox" id="chk"><label for="chk">',
                scope: {
                    row: '=rowSelect'
                },
                link: function (scope, element, attr, ctrl) {

                  element.bind('click', function (evt) {

                    scope.$apply(function () {

                        ctrl.select(scope.row, 'multiple');

                    });

                  });

                  scope.$watch('row.isSelected', function (newValue) {

                    if (newValue === true) {

                        element.parent().addClass('st-selected');
                        element.find('input').attr('checked', true);

                    } else {

                        element.parent().removeClass('st-selected');
                        element.find('input').attr('checked', false);

                    }
                  });
                }
    }
    };
    app.directive('rowSelect', [rowSelectDirective]);

});

In My Controller:

$scope.selectAll = function (collection) {

                // if there are no items in the 'selected' array, 
                // push all elements to 'selected'
                if ( $scope.selected.length === 0) {

                  angular.forEach(collection, function(val) {

                      $scope.selected.push(val.oid); 

                  });

                // if there are items in the 'selected' array, 
                // add only those that ar not
                } else if ( $scope.selected.length > 0 &&  $scope.selected.length !=  $scope.displayedCollection.length) {

                  angular.forEach(collection, function(val) {

                    var found =  $scope.selected.indexOf(val.oid);

                    if(found == -1)  $scope.selected.push(val.oid);

                  });

                // Otherwise, remove all items
                } else  {

                     $scope.selected = [];

                }

              };


              $scope.select = function(oid) {

                    var found = $scope.selected.indexOf(oid);

                    if(found == -1) $scope.selected.push(oid);

                    else $scope.selected.splice(found, 1);

                  };

Html:

<table st-table="displayedCollection" class="table table-striped smartTableFont"  st-safe-src="rowCollection">
       <thead>
        <tr>
         <th row-select-all="displayedCollection"  selected="selected" ng-click="selectAll(displayedCollection)"></th> 
         <th  st-sort="partnerName" class="text-left">Partner Name</th>
        </tr>

       </thead>
       <tbody>
        <tr ng-repeat="row in displayedCollection | limitTo : itemsByPage" >
          <td row-select="row" ng-click="select(row.oid)" ></td>
         <td class="text-left" width="25%">{{row.partnerName}}</td>


        </tr>
       </tbody>
</table>