$injector error using ui.bootstrap

Question

I am learning AngularJS, and trying to figure out how to work with modals, controllers and scopes using ngRepeat. I found a working JSFiddle of what I need, but I can't seem to get it to work locally.

From this JSFiddle, mentioned in this post, I have the following code:

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-2.5.0.js"></script>


<div ng-app="app">

       <div ng-controller="CustomerController">
        <div ng-repeat="customer in customers">
            <button class="btn btn-default" ng-click="open(customer)">{{ customer.name }}</button> <br />

                <!--MODAL WINDOW-->
                <script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                        <h3>The Customer Name is: {{ customer.name }}</h3>
                    </div>
                    <div class="modal-body">
                            This is where the Customer Details Goes<br />
                            {{ customer.details }}
                    </div>
                    <div class="modal-footer">

                    </div>
                </script>

        </div>
        </div>


</div>

<script>
    var app = angular.module('app', ['ui.bootstrap']);

    app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, customer)
    {
    $scope.customer = customer;

    });

    app.controller('CustomerController', function($scope, $timeout, $modal, $log) {

        $scope.customers = [
            {
            name: 'Ricky',
            details: 'Some Details for Ricky',
            },
            {
            name: 'Dicky',
            details: 'Some Dicky Details',
            },
            {
            name: 'Nicky',
            details: 'Some Nicky Details',
            }
        ];

        // MODAL WINDOW
        $scope.open = function (_customer) {

            var modalInstance = $modal.open({
              controller: "ModalInstanceCtrl",
              templateUrl: 'myModalContent.html',
                resolve: {
                    customer: function()
                    {
                        return _customer;
                    }
                }
                 });

        };

    });

</script>

My folder structure is as follows:

.
├── js
|   ├── ui-bootstrap-tpls-2.5.0.js
├── css
|   ├── bootstrap.min.css
├── index.html

I am using XAMPP to open the index.html. When I do, nothing loads and I get the following error:

angular.js:13642 Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20CustomerController
    at angular.js:38
    at angular.js:4501
    at Object.d [as get] (angular.js:4654)
    at angular.js:4506
    at d (angular.js:4654)
    at e (angular.js:4678)
    at Object.invoke (angular.js:4700)
    at P.instance (angular.js:10177)
    at n (angular.js:9096)
    at g (angular.js:8459)

Does anyone know why this happens, and what I need to change locally to fix this?

Thanks!

Answer 1

Read the error:

http://errors.angularjs.org/1.5.6/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20CustomerController

It can't use $modal service in CustomerController, because it's not the right one for ui-bootstrap.

You should use $uibModal instead. (It has the same syntax: $uibModal.open())