title: Angularjs Ui-Bootstrap modal popup inside specified element
body: <p>i have a problem with my code , this code is about append a modal to element with specific id. so that when button clicked ,this modal popup will showed inside div element with id="forModal" (div element with this id is inside view.html) ,my app using angularjs that have base html(index.html) ,one template for route(view.html),one template for modal(modal.html).</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;!-- ionic/angularjs js --&gt;
    &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
    &lt;!--Ui Route--&gt;
    &lt;script src="lib/ionic/js/angular-ui/angular-ui-router.min.js"&gt; &lt;/script&gt;
  
    &lt;!--UI Bootstrap--&gt;
    &lt;script src="lib/ionic/js/angular-ui/ui-bootstrap-2.5.0.min.js"&gt;&lt;/script&gt;
  
    &lt;!--UI Bootstrap TPLS--&gt;
    &lt;script src="lib/ionic/js/angular-ui/ui-bootstrap-2.5.0-tpls.min.js"&gt;&lt;/script&gt;
  
    &lt;!--ngCoockies--&gt;
    &lt;script src="js/angular-cookies.js"&gt;&lt;/script&gt;
  
    &lt;!-- my app's js --&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
    &lt;!--controller js--&gt;
    &lt;script src="js/controller.js"&gt;&lt;/script&gt;
  
   &lt;/head&gt;
   &lt;body ng-app="starter"&gt;
     &lt;ui-view&gt;&lt;/ui-view&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var moduleapp = angular.module('starter',  ['ionic','ui.router','ngCookies','ui.bootstrap']);
  
  moduleapp.config(function($stateProvider,$urlRouterProvider){
    $stateProvider.state("dashboard",{
      url:"/dashboard",
      templateUrl:"templates/dashboard.html",
      controller : "dashboardCtrl"
    })
  
   $stateProvider.state("dashboard.view",{
      url : "/view",
      templateUrl : "templates/view.html",
      controller: "viewDataCtrl"
    })
   $urlRouterProvider.otherwise("/dashboard.view")
   })
  </code></pre>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>moduleapp.controller('dashboardCtrl',[function(){
   //some code 
  }])
  
  moduleapp.controller('viewDataCtrl',['$document','$uibModal','$scope','$http','$cookies',function($document,$uibModal,$scope,$http,$cookies){
  
  // reserve variable,declare it as object
  $scope.dataColumn = {};
  $scope.dataData = {};
  
  // reserve variable for user authetication level
  $scope.userLevel= $cookies.get('userLevel');
  
  //function for finding available column
  function caricolumn(){
   $http.get('link for search column.php').success(function(hasil){
     $scope.dataColumn = hasil;
   });
  }
  
  //executing function when controller running
  caricolumn();
  
  //function for get data,return result to $scope.dataData as object
  function caridata(){
    $http.get('link for search data.php').success(function(hasil){
     $scope.dataData = hasil;
   })
  }
  
  //execute function when controller running
  caridata();
  //function for edit
  $scope.edit = function(x){
   var modalInstance = $uibModal.open({
    templateUrl:'templates/modal.html',
    controller:'viewDataCtrl',
    //THIS IS THE PROBLEM ,appendTO doesnt work,still inject modal popup to body element
    appendTo : angular.element(document.querySelector('#viewElement'))
   });
  }
  //function for delete data
   $scope.delete = function(x){
   $http.post('link for deletedata.php',x).success(function(hasil){
     alert(hasil);
     //if output(php echo) same as string ,this condition considered as success
     if(hasil == "Delete Success"){
       caridata();
     }
    })
   }
  }]);
  </code></pre>
  
  <p><strong>modal.html</strong></p>
  
  <pre><code>  &lt;div class="modal-header"&gt;
     &lt;h3&gt;Hayy&lt;/h3&gt;
    &lt;/div&gt;
   &lt;div class="modal-body"&gt;
     &lt;p&gt;this is Body&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="modal-footer"&gt;
     this is footer
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>dashboard.html</strong></p>
  
  <pre><code> &lt;ion-side-menus enable-menu-with-back-views="false"&gt;
     &lt;ion-side-menu-content&gt;
      &lt;ion-nav-bar class="bar-stable"&gt;
       &lt;ion-nav-back-button&gt;
       &lt;/ion-nav-back-button&gt;
  
       &lt;ion-nav-buttons side="left"&gt;
       &lt;button class="button button-icon button-clear ion-navicon" menu-toggle="left"&gt;
       &lt;/button&gt;
      &lt;/ion-nav-buttons&gt;
    &lt;/ion-nav-bar&gt;
  
    &lt;ui-view&gt;
    &lt;!--This is where view.html injected--&gt;
    &lt;/ui-view&gt;
  &lt;/ion-side-menu-content&gt;
  
  &lt;ion-side-menu side="left"&gt;
    &lt;ion-header-bar class="bar-stable"&gt;
     &lt;h1 class="title"&gt;Menu&lt;/h1&gt;
   &lt;/ion-header-bar&gt;
   &lt;ion-content&gt;
     &lt;ion-list &gt;&lt;a ui-sref="dashboard.add"&gt;
       &lt;ion-item&gt;Tambah Data&lt;/ion-item&gt;&lt;/a&gt;
     &lt;/ion-list&gt;
     &lt;ion-list &gt;&lt;a ui-sref="dashboard.view"&gt;
      &lt;ion-item&gt;Tampil Data&lt;/ion-item&gt;&lt;/a&gt;
     &lt;/ion-list&gt;
    &lt;ion-list &gt;
      &lt;a ng-click="logout()"&gt;
       &lt;ion-item&gt;Log Out&lt;/ion-item&gt;
      &lt;/a&gt;
     &lt;/ion-list&gt;
     &lt;/ion-content&gt;
    &lt;/ion-side-menu&gt;
  &lt;/ion-side-menus&gt;
  </code></pre>
  
  <p><strong>view.html</strong></p>
  
  <pre><code>&lt;div id="viewElement" class="container" style="margin-top:50px;"&gt;
   &lt;h2&gt;Data-Data&lt;/h2&gt;
   &lt;hr/&gt;
   &lt;table class="table table-bordered"&gt;
    &lt;thead&gt;
     &lt;tr&gt;
      &lt;th ng-repeat="dc in dataColumn"&gt;{{dc.KOLOM}}&lt;/th&gt;
      &lt;th ng-if="userLevel == 'LV02' || userLevel == 'LV01'"&gt;Edit&lt;/th&gt;
      &lt;th ng-if="userLevel == 'LV01'"&gt;Delete&lt;/th&gt;
     &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
     &lt;tr ng-repeat="dd in dataData" id="dt{{dd.IDROW}}"&gt;
      &lt;td ng-repeat="ddd in dd.DATA"&gt;{{ddd}}&lt;/td&gt;
      &lt;td ng-if="userLevel == 'LV01' || userLevel == 'LV01'"&gt;&lt;button type="button" ng-click="edit({{dd.IDROW}})" class="btn btn-warning"&gt;Edit&lt;/button&gt;&lt;/td&gt;
      &lt;td ng-if="userLevel == 'LV01'"&gt;&lt;button type="button" ng-click="delete({{dd.IDROW}})" class="btn btn-danger"&gt;Delete&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>as you can see ,when app running .route default will go to "dashboard.view"
  dashboard state is code for left sidemenu ,then dashboard.view state for viewing data(view state in child from dashboard state)
  what i want is when edit button clicked inside view.html(controller : viewDataCtrl,state : dashboard.view), modal popup will appear inside div element with id="forModal" (div element with this id is inside view.html)
  but with this code ,modal popup always appear inside body tag element not inside div element with id="forModal".
  how can i approach this condition ? thanks</p>