Inject $uibModalInstance throws error and modal doesn't close

I'm trying to make $uibModalInstance work for Angular Bootstrap Please see plunker http://plnkr.co/OzGgBs

Plunker README has more detail but in essence when I inject $uibModalInstance I get below error and modal doesn't close;

Error: [$injector:unpr] http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24uibModalInstanceProvider%20%3C-%20%24uibModalInstance%20%3C-%20GameController
    at Error (native)
    at http://localhost:1337/js/angular/angular-1.4.5.min.js:6:416
    at http://localhost:1337/js/angular/angular-1.4.5.min.js:40:307
    at Object.d [as get] (http://localhost:1337/js/angular/angular-1.4.5.min.js:38:308)
    at http://localhost:1337/js/angular/angular-1.4.5.min.js:40:381
    at d (http://localhost:1337/js/angular/angular-1.4.5.min.js:38:308)
    at Object.e [as invoke] (http://localhost:1337/js/angular/angular-1.4.5.min.js:39:64)
    at Q.instance (http://localhost:1337/js/angular/angular-1.4.5.min.js:80:151)
    at L (http://localhost:1337/js/angular/angular-1.4.5.min.js:61:140)
    at g (http://localhost:1337/js/angular/angular-1.4.5.min.js:54:326) <div class="modal-content" uib-modal-transclude="">

Solution

There were several problems in your code. I have corrected script url, added type attribute. Removed container function from script.js, so the myApp instance is accessed globally. Corrected ng-click function name assigned to close button. Corrected link function definition of dashboard directive.

Plnkr

index.html

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js" ></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js" ></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-resource.min.js" ></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" />

  <link rel="stylesheet" href="style.css" />

  <script type="text/javascript" src="script.js"></script>
  <script type="text/javascript" src="Controllers.js"></script>
  <script type="text/javascript" src="directives.js"></script>

</head>

<body>
  <dashboard></dashboard>
</body>

</html>

script.js

  var myApp = angular.module('myApp', ['ui.bootstrap', 'ngRoute', 'ngResource']).

  config(['$locationProvider', '$httpProvider', function($locationProvider, $httpProvider) {

    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
    $httpProvider.defaults.useXDomain = true;

  }])

directives.js

//"use strict";
myApp.directive('dashboard', ['$uibModal', function($uibModal) {
  return {
    restrict: 'E',
    transclude: true,
    templateUrl: 'dashboard.html',
    link: function($scope, element, attrs, modelCtrl) {

      $scope.buttonLabel = 'Open Modal';

      $scope.openModal = function() {
        var modalInstance = $uibModal.open({
          animation: false,
          templateUrl: 'modal.html',
          controller: 'ModalController',
          scope: $scope,
          size: 'lg'
        });
      };

    }
  };
}])

Controllers.js

.controller('ModalController', function($scope, $uibModalInstance) {
    $scope.closeModal = function() {
      $uibModalInstance.close();
    };
  });

modal.html

<!DOCTYPE html>
<div>
  <div class="modal-body">
    Lorem ipsum, blah blah.
  </div>
  <div class="modal-footer">
    <div class="row">
      <div class="col-md-12">
        <button class="btn btn-primary" type="button" data-ng-click="closeModal()">Close</button>
      </div>
    </div>
  </div>
</div>

Now the modal woks fine.