How do I increase modal width in Angular UI Bootstrap?

I use a css class like so to target the modal-dialog class:

.app-modal-window .modal-dialog {  width: 500px;}

Then in the controller calling the modal window, set the windowClass:

    $scope.modalButtonClick = function () {        var modalInstance = $modal.open({            templateUrl: 'App/Views/modalView.html',            controller: 'modalController',            windowClass: 'app-modal-window'        });        modalInstance.result.then(            //close            function (result) {                var a = result;            },            //dismiss            function (result) {                var a = result;            });    };

Another easy way is to use 2 premade sizes and pass them as parameter when calling the function in your html.use:'lg' for large modals with width 900px 'sm' for small modals with width 300pxor passing no parameter you use the default size which is 600px.

example code:

$scope.openModal = function (size) {var modal = $modal.open({                templateUrl: "/partials/welcome",                controller: "welcomeCtrl",                backdrop: "static",                scope: $scope,                size: size,            });modal.result.then(        //close        function (result) {            var a = result;        },        //dismiss        function (result) {            var a = result;        });};

and in the html I would use something like the following:

<button ng-click="openModal('lg')">open Modal</button>  

You can specify custom width for .modal-lg class specifically for your popup for wider viewport resolution. Here is how to do it:

CSS:

@media (min-width: 1400px){   .my-modal-popup .modal-lg {       width: 1308px;   }       }

JS:

var modal = $modal.open({    animation: true,    templateUrl: 'modalTemplate.html',    controller: 'modalController',    size: 'lg',    windowClass: 'my-modal-popup'});