<historical-summary-table
    columns="::historicalSummaryCtrl.historicalColumns"
    lines-array="historicalSummaryCtrl.modifiedCustomerProperties"
    group-field="date",
    group-field-filter="date",
    group-field-filter-format="dd/MM/yyyy">
</historical-summary-table>

<modal id="custom-modal-1">
    <div class="modal">
        <div class="modal-body">
            <h1>A Custom Modal!</h1>
            <p>
                Home page text: <input type="text" ng-model="vm.bodyText" />
            </p>
            <button ng-click="vm.closeModal('custom-modal-1');">Close</button>
        </div>
    </div>
    <div class="modal-background"></div>
</modal>

(function() {
  'use strict';
  angular
  .module('eciSubscription')
  .controller('historicalSummaryController', historicalSummaryController);
  historicalSummaryController.$inject = ['$scope', '$q', '$http', '$state', '$stateParams', '$filter', 'historicalService', 'customerFactory', 'historicalSummaryUtils', 'historicalUtils'];
  /* @ngInject */
  function historicalSummaryController($scope, $q, $http, $state, $stateParams, $filter, historicalService, customerFactory, historicalSummaryUtils, historicalUtils, ModalService) {
    var vm = this;

    initController();

    function initController() {
      vm.bodyText = 'This text can be updated in modal 1';
    }

    function openModal(id){
      ModalService.Open(id);
    }

    function closeModal(id){
      ModalService.Close(id);
    }

 ...

(function () {
    'use strict';

    angular
        .module('eciSubscription')
        .directive('modal', Directive);

    function Directive(ModalService) {
        return {
            link: function (scope, element, attrs) {
                // ensure id attribute exists
                if (!attrs.id) {
                    console.error('modal must have an id');
                    return;
                }

                // move element to bottom of page (just before </body>) so it can be displayed above everything else
                element.append('body');

                // close modal on background click
                element.on('click', function (e) {
                    var target = angular.element(e.target);
                    if (!target.closest('.modal-body').length) {
                        scope.$evalAsync(Close);
                    }
                });

                // add self (this modal instance) to the modal service so it's accessible from controllers
                var modal = {
                    id: attrs.id,
                    open: Open,
                    close: Close
                };
                ModalService.Add(modal);

                // remove self from modal service when directive is destroyed
                scope.$on('$destroy', function() {
                    ModalService.Remove(attrs.id);
                    element.remove();
                });

                // open modal
                function Open() {
                    element.show();
                    angular.element('body').addClass('modal-open');
                }

                // close modal
                function Close() {
                    element.hide();
                    angular.element('body').removeClass('modal-open');
                }
            }
        };
    }
})();

function historicalSummaryTable($filter){
  return {
    restrict:'EA',
    link:link,
    templateUrl: 'jfrontalesru/app/components/historicalSummary/historicalSummaryTable.html',
    scope:{
      linesArray: "=",
      columns: "=",
      groupField:"@",
      groupFieldFilter:"@",
      groupFieldFilterFormat:"@"
    },
  };

  function link(scope, element, attrs){
    var _groupField = 'groupField';
    var _subgroupField = 'subgroupField';

    scope.$watch('linesArray',function(value){
      scope.linesArray.forEach(function(line){
        scope.columns.forEach(function(column, index){
          if(column.filter && column.filter.length > 0){
            console.log(line[column.key]);
            var date = new Date(line[column.key]);
            console.log(date);
            date = ('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
            console.log(date);

            line[column.key] = $filter(column.filter)(line[column.key], column.format);
            line[column.key] = date + ' ' + '(' + line[column.key] + ')';
          }
        });
      });
    });
  }
}