jeremy jeremy - 1 year ago 223
AngularJS Question

Select All Checkbox for Smart tables in AngularJS

Hey guys so i'm trying to implement a selectall checkbox at the top of my list of checkboxes using a custom directive and i've referred to this thread to do so:

So far I'm getting an error that says TypeError: Cannot read property 'forEach' of undefined. Would really appreciate it if someone can help me out with this one. Thanks

My html:

<div class="row">
<div class="col-md-12">
<table id="document-table" st-table="documents" class="table">
<st-select-all all="yourDisplayedCollection"></st-select-all>
<tr ng-repeat="document in documents">
<td><input type="checkbox" ng-model="checkedDocument"/></td>

My Directive:

.directive('stSelectAll', function () {
return {
restrict: 'E',
template: '<input type="checkbox" ng-model="isAllSelected" />',
scope: {
all: '='
link: function (scope, element, attr) {

scope.$watch('isAllSelected', function () {
scope.all.forEach(function (val) {
val.isSelected = scope.isAllSelected;

scope.$watch('all', function (newVal, oldVal) {
if (oldVal) {
oldVal.forEach(function (val) {
val.isSelected = false;

scope.isAllSelected = false;

Answer Source

I don't think you need to watch all, only isAllSelected. Try removing that watch altogether. I'm using the same directive for Smart Table and I don't watch all. You also want to add a check to make sure all exists:

scope.$watch('isAllSelected', function() {
  if(scope.all) {
    scope.all.forEach(function (val) {
      val.isSelected = scope.isAllSelected;

Also, you are supposed to make a copy of your original array to use for st-safe-src attribute on your table. Then use the original array for your directive.

// in your controller (not in your directive)
$scope.yourDisplayedCollection = [].concat($scope.documents);

Then change your view.

<table id="document-table" st-table="documents" st-safe-src="yourDisplayedCollection" class="table">

<st-select-all all="documents"></st-select-all>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download