javascript - Open bootstrap popup from angular controller -

in angular template have 2 anchors,first display text inside popoup , second 1 display images inside popup,like this:

<a ng-click="openpopup('text')">text popup</a><a ng-click="openpopup('image')">image popup</a> 

i have 2 different popup's text , images.i want open text popup if user click "text popup". same image. here sample text , 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 using ui.bootstrap.modal how can achieve this?

save both modals 2 html file , use open pop

$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             });         }    }