AngularJS - Closing the modal

Question

I want a close button, the x at the top right corner, and click outside the modal to close the modal window.

Here I created the button to open the modal: (rollup.html)

        <li style="float: right;">
          <button id="myBtn" ng-click="printDivModal('rollup-tab', test)">Modal Test</button>
        </li>

This opens the modal: (rollup.js)

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {

.....

$scope.printDivModal = function(divName,test) {
            console.log('opening pop up');
            var ModalInstance = $uibModal.open({
                scope: $scope,
                animation: $scope.animationsEnabled,
                templateUrl: 'app/views/modals/stackedModal.html',
                size: 'xl',
                controller: 'PrintViewCtrl',
                backdrop : 'static',

                resolve: {
                    test: function () {

                      return test;
                    }
                  }


            });

        }   
});

And here is the content of the modal itself: (stackedModal.html)

    <div class="modal-footer">
        <button ng-click="closeModal()" type="button" class="btn btn-default">Close</button>
        <!-- data-dismiss="modal" -->
    </div>

Here I wrote the scope to close the modal, but it does not seem to work. When I click the close button, the alert appears, but the action is not executed.: (stackedModal.js)

app.controller('PrintViewCtrl', rollUpCtrl);
rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal', 'headersvc','locFiltersvc']

function rollUpCtrl($scope, $rootScope, $http, $uibModal, $modalInstance, headersvc, locFiltersvc) {

.....

    $scope.closeModal = function () {
        alert("close the modal!");
            $modalInstance.close();
          };
}

Any help is appreciated.

EDIT FOR RESOLVE (rollup.js)

app.controller('PrintViewCtrl', function($scope, $http, $rootScope, $uibModalInstance) {
    $scope.test = function() {
            $scope.regionName;
            $scope.groupName;
            $scope.mcName;
            $scope.districtNumber;
            $scope.routeNumber;
            $scope.weekEndDate;

    };

}); 

This is the data I want to pull from (route.html)

        <div class="row">
            <div class="col-xs-6 col-md-4">
                <label>Region:</label>
                <span>{{regionName}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>Group:</label>
                <span>{{groupName}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>MC:</label>
                <span>{{mcName}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>District #:</label>
                <span>{{districtNumber}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>Route #:</label>
                <span>{{routeNumber}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>Week Ending Date:</label>
                <span>{{weekEndDate}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>RSR:</label>
                <span style="text-transform: capitalize;">{{rsrName}}</span>
            </div>
        </div>

Answer 1

First, the latest version of the library injects $uibModalInstance not $modalInstance , so double check that. Additionally, you are not injecting the $uibModalInstance in your controller definition:

rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal', '$uibModalInstance', 'headersvc','locFiltersvc'];
function rollUpCtrl($scope, $rootScope, $http, $uibModal, $uibModalInstance, headersvc, locFiltersvc) {

Second, backdrop: static will prevent the modal from closing by clicking on the backdrop. Try backdrop: true instead.