Submodules in Angular 1.x

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 1.x Controller</title>
    <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" title="" type="" />
  </head>

  <body ng-app="app">
    <categories-list></categories-list>
    <script src="script.js"></script>
  </body>

</html>

class CategoriesModel {
  constructor($q) {
    this.$q = $q;
  }
  
  getCategories() {
    return this.$q.when([]);
  }
  
  setCurrentCategory(category) {
    this.currentCategory = category;
  }
}

class CategoriesListCtrl {
  constructor(CategoriesModel) {
    'ngInject';

    this.CategoriesModel = CategoriesModel;
    this.CategoriesModel.getCategories()
      .then(result => this.categories = result);
  }

  onCategorySelected(category) {
    this.CategoriesModel.setCurrentCategory(category);
  }
}

const CategoriesList = {
  template: '<div>Hello Categories List</div>',
  controller: CategoriesListCtrl,
  controllerAs: 'categoriesListCtrl'
};

angular.module('app', [])
    .service('CategoriesModel', CategoriesModel)
    .component('categoriesList', CategoriesList)
  ;

/* Styles go here */

#box {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  border-radius: 5px;
  text-shadow: 0 0 5px yellow;
  padding: 1px 30px;
  font: 25px sans-serif;
  text-align: center;
  line-height: 22px;
  letter-spacing: -2px;
}