Angular $uibModal causing Error: [$injector:unpr]

Question

I am trying to implement $uibModal from this site

but as soon as I add $uibModal service to my controller I get Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/ $injector/unpr?p0=%24uibModalProvider%20%3C-%20%24uibModal%20%3C-%20dailymenuController My angular code is below:

var app = angular.module('App', ['djangular-confirm','djangular-alert','ui.bootstrap']).config(function($httpProvider,$interpolateProvider) {

                $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
                $httpProvider.defaults.headers.common['X-CSRFToken'] = '{$ csrf_value $}';
                $interpolateProvider.startSymbol('{$');
                $interpolateProvider.endSymbol('$}');
            });

            app.controller('dailymenuController', function($scope, $http, $location, $djconfirm, $djalert, $uibModal ) {

                var modalInstance = $uibModal.open({

                });
});

I have added these two files: 'ui-bootstrap-custom-1.3.3.js' 'bootstrap-custom-tpls-1.3.3.js'

I am novice in angular and did little development using angular so far. I searched on google and SO and came to know that "ui.bootstrap" while creating module. But even that didn't resolve issue. Any help would be great.

Answer 1

This kind of error [$injector:unpr] states that Angular can't resolve provider for the item you're using - in your case need to inject $uibModal into your controller

app.controller('dailymenuController', ['$scope', '$uibModal', function($scope, $uibModal ) {
  var modalInstance = $uibModal.open({
     //...
  });
}]);

Answer 2

You have to include both:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

After included Angular.