как использовать модал в классе контроллера UI-bootstrap

Question

У меня есть файл login.js:

class loginModelController {
    constructor(){
    }
    open () {
    }
}
export const LogInModelComponent = {
    teamplateUrl: 'login.component.html',
    controller: loginModelController,
};

этот контроллер вызван app.js:

import {LogInModelComponent} from './component/login.js';

var app = angular.module('nav-module', ["ui.router",'ui.bootstrap']);
app.component('loginComponent',LogInModelComponent);
app.config(['$stateProvider',
'$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
    $stateProvider
    .state('home',{
        url:'/home',
        component: 'loginComponent'
    });
    $urlRouterProvider.otherwise('/');
}]);

login.component.html так:

<div class="modal-demo">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">modal!</h3>
            </div>
            <div class="modal-body" id="modal-body">
                <ul>
                    <li>
                       <p>item1</p>
                       <p>item2</p>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">Close</button>
            </div>
        <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
        <div class="modal-parent">
        </div>
    </div>

Теперь я хочу использовать модал с шаблоном login.component.html и контроллером login.js.Но я не знаю, как использовать свойство $ uibModal модальности ui-bootstrap внутри контроллера входа в систему>

, пожалуйста, помогите!