Untitled

<!doctype html>
<html ng-app="myApp">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
  <script src="//unpkg.com/angular-ui-router@1.0.0-rc.1/release/angular-ui-router.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  <script src="script.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <ui-view></ui-view>
</body>

</html>

let app = angular.module('myApp', ['ui.router', 'ngAnimate', 'ui.bootstrap']);

app.config(function($urlRouterProvider, $stateProvider) {
  $urlRouterProvider.otherwise('/modalDemo');
  $stateProvider.state({
    name: 'modalDemo',
    url: '/modalDemo',
    component: 'modalDemoComponent'
  });
});

app.component('modalDemoComponent', {
  template: `<div>
        <button type="button" class="btn btn-default" ng-click="$ctrl.openComponentModal()">Open a component modal!</button>
        <div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
        <ui-view></ui-view>
    </div>`,
  controller: modalDemoCtrl
});

var modalDemoCtrl = function($scope, $uibModal, $log, $document) {
  let $ctrl = this;
  $ctrl.items = ['item1', 'item2', 'item3'];
  $ctrl.animationsEnabled = true;
  $ctrl.openComponentModal = function() {
    console.log('HELLO WORLD');
    $log.info('HELLO WORLD');

    var modalInstance = $uibModal.open({
      animation: $ctrl.animationsEnabled,
      component: 'modalDemoComponent.modalInstanceComponent',
      resolve: {
        items: function() {
          return $ctrl.items;
        }
      }
    });

    modalInstance.result.then(function(selectedItem) {
      $ctrl.selected = selectedItem;
    }, function() {
      $log.info('modal-component dismissed at: ' + new Date());
    });
  };
};

app.component('modalDemoComponent.modalInstanceComponent', {
  template: `<div class="modal-header">
        <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body" id="modal-body">
        <ul>
            <li ng-repeat="item in $ctrl.items">
                <a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ $ctrl.selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
    </div>`,
  bindings: {
    resolve: '<',
    close: '&',
    dismiss: '&'
  },
  controller: ModalInstanceCtrl
});

var ModalInstanceCtrl = function($uibModalInstance) {
  let $ctrl = this;
  $ctrl.$onInit = function() {
    $ctrl.items = $ctrl.resolve.items;
    $ctrl.selected = {
      item: $ctrl.items[0]
    };
  };
  $ctrl.ok = function() {
    $ctrl.close({
      $value: $ctrl.selected.item
    });
  };
  $ctrl.cancel = function() {
    $ctrl.dismiss({
      $value: 'cancel'
    });
  };
};