In angular Template I have two anchors,first display text inside popoup and second one display images inside popup,Like this:

<a ng-click="openPopup('Text')">Text popup</a><a ng-click="openPopup('Image')">Image popup</a>

I have a two different popup's for Text and Images.I want to open text popup if user click "Text popup". Same like Image. Here is the sample text and Image popup code.

    <div class="modal fade" id="myTextModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" style="width:800px" role="document">
                //Content goes here
             </div>
    </div>
    <div class="modal fade" id="myImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" style="width:800px" role="document">
                //Content goes here
             </div>
    </div>

In controller:

    $scope.openPopup = function(Value) {
            if(Value=='Text'){
                //open Text popup
            }else{
                //open Image popup
            }
       }

I am using ui.bootstrap.modal How can I achieve this?

In angular Template I have two anchors,first display text inside popoup and second one display images inside popup,Like this:

<a ng-click="openPopup('Text')">Text popup</a><a ng-click="openPopup('Image')">Image popup</a>

I have a two different popup's for Text and Images.I want to open text popup if user click "Text popup". Same like Image. Here is the sample text and Image popup code.

    <div class="modal fade" id="myTextModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" style="width:800px" role="document">
                //Content goes here
             </div>
    </div>
    <div class="modal fade" id="myImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" style="width:800px" role="document">
                //Content goes here
             </div>
    </div>

In controller:

    $scope.openPopup = function(Value) {
            if(Value=='Text'){
                //open Text popup
            }else{
                //open Image popup
            }
       }

I am using ui.bootstrap.modal How can I achieve this?

• javascript
• angularjs
• twitter-bootstrap

• It says how right in the docs angular-ui.github.io/bootstrap/#/modal – masimplo Commented Sep 21, 2015 at 7:20
• 1 Did you say you are using ui.bootstrap.modal ? Then @Jenson's answer has the correct approach. – Karthik Commented Sep 21, 2015 at 7:27

4 Answers 4

save both the modals to two html file and use this to open pop up

$scope.openPopup = function(Value) {
        if(Value=='Text'){
            $scope.modalInstance = $modal.open({
                templateUrl: 'views/text.html',
                scope: $scope
            });
        }else{
                $scope.modalInstance = $modal.open({
                templateUrl: 'views/image.html',
                scope: $scope
            });
        }
   }

You can open modals like this

$scope.openPopup = function(Value) {
        if(Value=='Text'){
            $("myTextModal").modal("show");
        }else{
            $("myImageModal").modal("show");
        }
   }

Bootstrap JS Modal

You can assign a ng-hide or ng-show property to your modal html code

<div ng-show="showModal">

then all you have to do is swithcing the $scope.showModal to true whenever you want to show your modal screen and false to hide it.

another method is using angular-ui dependency and use $modal property which is based on bootstrap.

https://angular-ui.github.io/bootstrap/#/modal

Thanks guys for replying. I just found my answer. This is how we can achieve.

$scope.openPopup = function(Value) {
        var elementText = angular.element('#myTextModal');
        var elementImage = angular.element('#myImageModal');
            if(Value=='Text'){
                elementText.modal('show');
            }else{
                elementImage.modal('show');
            }
       }