Using require and transclusion for angular1 components

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="mainCtrl">
    <dropdown on-option-select="onOptionSelect(optionName)">
      <dropdown-option ng-repeat="option in options" option-name="{{option}}">{{option}}</dropdown-option>
    </dropdown>
    <div style="margin-top: 20px;">Last option selected: <span style="font-weight: bold;">{{lastSelectedOption}}</span></div>
  </body>

</html>

var myApp = angular.module('myApp', []);

myApp.controller('mainCtrl', ($scope) => {
  $scope.options = [
    'Add',
    'Edit',
    'Delete',
  ];
  
  $scope.onOptionSelect = (optionName) => {
    $scope.lastSelectedOption = optionName; 
  }
});

myApp.component('dropdown', {
  template: `
    <div class="dropdown">
      <div class="dropdown__button" ng-click="$ctrl.toggleDropdown()">Select a option &or;</div>
      <div class="dropdown__box" ng-show="$ctrl.showDropdown">
        <ng-transclude></ng-transclude>
      </div>
    </div>
  `,
  transclude: true,
  bindings: { onOptionSelect: '&' },
  controller: dropdownController,
});

function dropdownController() {
  const viewModel = this;
  
  viewModel.options = ['thing'];
  viewModel.addOption = addOption;
  viewModel.toggleDropdown = toggleDropdown;
  
  function addOption(option) {
    viewModel.options.push(option);
  }
  
  function removeOption(option) {
    viewModel.options.splice(options.indexOf(option), 1);
  }
  
  function toggleDropdown() {
    viewModel.showDropdown = !viewModel.showDropdown;
  }
}

myApp.component('dropdownOption', {
  template: `
    <ng-transclude class="dropdown__box__option" ng-click="$ctrl.onOptionClick()"></ng-transclude>
  `,
  transclude: true,
  require: { parent: '^dropdown' },
  bindings: { optionName: '@' },
  controller: dropdownOptionsController,
});

function dropdownOptionsController() {
  const viewModel = this;
  
  viewModel.$onInit = $onInit;
  viewModel.onOptionClick = onOptionClick;
  
  function $onInit() {
    viewModel.parent.addOption(viewModel.optionName);
  }
  
  function onOptionClick() {
    viewModel.parent.onOptionSelect({optionName:viewModel.optionName});
    viewModel.parent.toggleDropdown();
  }
  
  function $onDestroy() {
    viewModel.parent.removeOption(viewModel.optionName);
  }
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown__button{ 
  display: inline-block;
  padding: 5px 7px;
  border: 1px solid #eee;
  border-radius: 2px;
  cursor: pointer;
}

.dropdown__box {
 position: absolute;
 top: 29px;
 left: 0;
 right: 0;
 
 border: 1px solid #555;
}

.dropdown__box__option {
  display: block;
  padding: 2px 7px;
  cursor: pointer;
  background-color: #fff;
}

.dropdown__box__option:hover {
  background-color: #eee;
}