Developing an AngularJS Directive for table's select all or select single

Our team using Angularjs to developing the SPA. There is a table in the page.And the first column, it had Select All, each row had "Select", if we using the normal logic codes for this feature,it is very easy. But the application had a lot of pages with table, so we should copy the codes each time. we want the same behavior as follow that Angular Material has shown.

And I had spend some times to write the directive, the code url is : http://ift.tt/1VrxO7a

angular.module('app.directives').directive('checkAllSingle', [function () {
    return {
        restrict: 'A',
        templateUrl: 'components/directives/check/checkbox.html',

        scope: {
            checked: '=?checked',
            allChecked: '=?allChecked',
            checkType: "@",//字符串
            tableDataList: '=tableDataList',
            selectedItems: '=?selectedItems'//选中内容
        },
        link: function (scope, element, attrs, ctrl, rootScope) {

            scope.$checked = scope.checked;

            scope.$allChecked = scope.allChecked;

            scope.$watch('checked', function (newV, oldV) {
                if (newV != oldV) {
                    scope.$checked = scope.checked;
                }
            });

            scope.$watch('allChecked', function (newV, oldV) {
                if (newV != oldV) {
                    scope.$allChecked = scope.allChecked;
                }
            });


            scope.checkFunc = function () {

                if (scope.checkType == 'all') {
                    scope.tableDataList.forEach(function (item) {
                        item.$checked = scope.$allChecked;
                    });
                } else {
                    scope.checked = scope.$checked;

                    setTimeout(function () {
                        var result = scope.tableDataList.every(function (item) {
                            return item.$checked;
                        });
                        scope.$parent.ctrl.$allChecked = result;
                        scope.$apply();
                    }, 0);
                }
                scope.$parent.ctrl.selectedItems = [];
                setTimeout(function () {

                    scope.tableDataList.forEach(function (item) {
                        if (item.$checked) {
                            scope.$parent.ctrl.selectedItems.push(item);
                        }

                    });
                    scope.$apply();
                }, 1);
            };




        }
    };
}]);

I had done it, but I think the codes in checkbox.directive.js is not very good. Because I used the setTimeout function to do something. For updating the parent variable, I using the parent scope-"ctrl", other workmates maybe don't use the controllerAs in the controller file, so there are a lot of issue in codes. Anybody had implemented these features like this.