controller.js

const _MODULE = 'test';

(function(angular) {
  'use strict';

  angular.module(_MODULE, []);

  angular
    .module(_MODULE)
    .controller('testController', testController);

  testController.$inject = [
    '$log',
    '$scope',
    '$timeout'
  ];

  function testController($log, $scope, $timeout) {

    let vm = this;
    let ng = angular;

    /**
     * @public
     * @desc used for public functions inside view
     */
    vm.fn = {
      showAllNumbers  : showAllNumbers,
      showEvenNumbers : showEvenNumbers,
      showOddNumbers  : showOddNumbers,
      textAlignLeft   : textAlignLeft,
      textAlignRight  : textAlignRight,
      updateMinNumber : updateMinNumber,
      updateMaxNumber : updateMaxNumber
    };

    /**
     * @public
     * @desc used for public functions inside view
     */
    vm.data = {
      customRangeObject : {
        minNumber       : null,
        maxNumber       : null,
        rangeArray      : [],
        rangeArrayEven  : [],
        rangeArrayOdd   : []
      }
    };
    // window.customRangeObject = vm.data.customRangeObject;
    
    /**
     * @public
     * @desc update customRangeObject with updated minNumber by user input
     */
    function updateMinNumber() {
      // $log.info("minNumber change event detected");
      // $log.log("minNumber: "+vm.data.customRangeObject.minNumber);
      // $log.log("maxNumber: "+vm.data.customRangeObject.maxNumber);
      // $log.log("Generating new number range...");
      $scope.generateRange(vm.data.customRangeObject.minNumber, vm.data.customRangeObject.maxNumber);
    }

    /**
     * @public
     * @desc update customRangeObject with updated maxNumber by user input
     */
    function updateMaxNumber() {
      // $log.info("maxNumber change event detected");
      // $log.log("minNumber: "+vm.data.customRangeObject.minNumber);
      // $log.log("maxNumber: "+vm.data.customRangeObject.maxNumber);
      // $log.log("Generating new number range...");
      $scope.generateRange(vm.data.customRangeObject.minNumber, vm.data.customRangeObject.maxNumber);
    }

    /**
     * @public
     * @desc show even and odd numbers
     */
    function showAllNumbers() {
      // $log.log(vm.data.customRangeObject.rangeArray);
      $timeout(function () {
        $scope.$apply(function () {
          $scope.rangeArray = vm.data.customRangeObject.rangeArray;
        });
      }, 0);
      // $log.log("showAllButton clicked");
    }

    /**
     * @public
     * @desc show only even numbers
     */
    function showEvenNumbers() {
      // $log.log(vm.data.customRangeObject.rangeArrayEven);
      $timeout(function () {
        $scope.$apply(function () {
          $scope.rangeArray = vm.data.customRangeObject.rangeArrayEven;
        });
      }, 0);
      // $log.log("showEvenButton clicked");
    }

    /**
     * @public
     * @desc show only odd numbers
     */
    function showOddNumbers() {
      // $log.log(vm.data.customRangeObject.rangeArrayOdd);
      $timeout(function () {
        $scope.$apply(function () {
          $scope.rangeArray = vm.data.customRangeObject.rangeArrayOdd;
        });
      }, 0);
      // $log.log("showOddButton clicked");
    }

    let numberRangeElement = angular.element(document.querySelector('.list ul'));
    // $log.log(numberRangeElement);

    /**
     * @public
     * @desc align number list to the left
     */
    function textAlignLeft() {
      numberRangeElement.removeClass('text-right');
      // $log.log("textLeftButton clicked");
    }

    /**
     * @public
     * @desc align number list to the right
     */
    function textAlignRight() {
      numberRangeElement.addClass('text-right');
      // $log.log("textRightButton clicked");
    }

    /**
     * @private
     * @desc initializes the controller
     */
    function init() {
      $log.debug('testController initialized');
    }
    init();
  }
})(window.angular);