overlay component using ui-bootstrap modal

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

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button class="btn btn-default" ng-click="open()">Open the Modal!</button>
    
    <overlay ng-if="showOverlay1" controller='Overlay1Ctrl' 
      title='Test Overlay 1' template-url='overlay1.html'></overlay>
    
  </body>

</html>

var app = angular.module("myApp", ['ui.bootstrap']);


app.controller('MainCtrl', function($scope) {
    
  $scope.showOverlay1 = false;
  
  $scope.open = function () {
    $scope.showOverlay1 = true;
  }

});


    
app.controller('Overlay1Ctrl', function($scope, $modalInstance, config) {
    
  $scope.templateUrl =  config.templateUrl;
  $scope.title = config.title;

  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
  
});

app.directive('overlay', function($modal) {

  return {
    restrict: "E",
    scope: {
      templateUrl:'@',
      controller: '@',
      title: '@'
    },
    link: function($scope) {
      
      var modalInstance = $modal.open({
        templateUrl: 'overlay.html',
        controller: $scope.controller,
        resolve: {
          config: function() {
            return {
              templateUrl: $scope.templateUrl,
              title: $scope.title
            }
          }
        }
        
      });
      
      modalInstance.result.then(function () {
        $log.info('Modal success at: ' + new Date());
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
      
    }
    
  }
  
});

/* Styles go here */

<div class="modal-header">
    <h3>{{title}}</h3>
</div>
<div class="modal-body">
    <div ng-include='templateUrl'></div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>