Why isn't the following function selecting all the checkboxes inside this directive?

The following directive has two tabels: one with checkboxes and another without checkboxes. It also has a function which selects all the checkboxes:

  .directive('tableList', function() {
    return {
      restrict: 'EA',
      template: '<button ng-if="listAll" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">' +
      'Launch demo modal' +
    '</button>' +
    '<table class="table table-stripped">' +
    '<thead>' +
        '<th>SOME CODE</th>' +
      '</tr>' +
    '</thead>' +
    '<tbody>' +
      '<tr ng-repeat="item in listThis">' +
        '<th scope="row">{{$index + 1}}</th>' +
        '<td><a href="#/groups/{{item.id}}">{{item.name}}</a></td>' +
        '<td>SOME CODE</td>' +
      '</tr>' +
    '</tbody>' +
      '</table>' +
      '<div ng-if="listAll" class="" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">' +
    '<div class="modal-dialog">' +
      '<div class="modal-content">' +
        '<div class="modal-header">' +
          '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
          '<h4 class="modal-title">Modal title</h4>' +
        '</div>' +
        '<div class="modal-body">' +
          '<table class="table table-stripped list-all">' +
        '<thead>' +
          '<tr>' +
            '<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>' +
            '<th>SOME CODE</th>' +
          '</tr>' +
        '</thead>' +
        '<tbody>' +
          '<tr ng-repeat="item in listAll">' +
            '<th scope="row"><input type="checkbox" value="0" ng-model="item.selected"></th>' +
            '<td><a href="#/groups/{{item.id}}">{{item.name}}</a></td>' +
            '<td>SOME CODE</td>' +
          '</tr>' +
        '</tbody>' +
          '</table>' +
        '</div>' +
        '<div class="modal-footer">' +
          '<button type="button" class="btn btn-primary">Save changes</button>' +
        '</div>' +
      '</div><!-- /.modal-content -->' +
    '</div><!-- /.modal-dialog -->' +
      '</div><!-- /.modal -->',
      scope: {
    listThis: "=",
    listAll: "=",
    submit: "&"
      },
      controller: function() {
      },
      link: function(scope, elem, attr, ctrl) {
    scope.checkAll = function() {
      if (scope.selectedAll) {
        scope.selectedAll = true
      } else {
        scope.selectedAll = false
      }
      angular.forEach(scope.listAll, function (item) {
        item.selected = scope.selectedAll
      })
    }
      }
  };
})

The checkboxes work. This is how it looks like if I check the first item:

[
  {
    "id": "1",
    "name": "User 1",
    "selected": true
  },
  {
    "id": "2",
    "name": "User 2",
    "selected": false
  },
  {
    "id": "3",
    "name": "User 3",
    "selected": false
  }
]

But when I click the checkboxe that checks all the items nothing happens:

What could be the problem?

This is how I'm using the directive:

  <table-list
list-this="users"
list-all="users"
submit="submit(event)">
  </table-list>