title: Angularjs bootstrap modal pop up not working
body: <p>I have an about.html where it shows the 6 images in each column. When you click on individual profile the new pop up window should pop up (open up) which show a background info of that individual. This is just the bootstrap hard codes inside the angularjs app. I have been trying to create the angularjs modal pop up as shown:</p>
  
  <pre><code>&lt;div class = "container"&gt;
      &lt;div class="row"&gt;
         &lt;div class="col-md-4 col-sm-6 portfolio-item"&gt;
             &lt;a href="#profile-1" class="portfolio-link" data-toggle="modal"&gt;
             &lt;div class="portfolio-hover"&gt;
                &lt;div class="portfolio-hover-content"&gt;
                   &lt;p class="p-hover"&gt;my profile...&lt;/p&gt;                           
                 &lt;/div&gt;
                 &lt;/div&gt;
                  &lt;img src="images/pic1.jpg" class="img-responsive" alt=""&gt; &lt;/a&gt;
                  &lt;div class="portfolio-caption"&gt;
  
                      &lt;p class="text-muted"&gt;Guitarist since 1977&lt;/p&gt;
            &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This should be the content on pop up window once you click on image of the profile:    </p>
  
  <pre><code>&lt;modal id="profile-1"&gt;
      &lt;div class="modal"&gt;
           &lt;div class="container"&gt;
                 &lt;div class="row"&gt;
                   &lt;div class="col-md-3 col-xs-12"&gt;
                  &lt;div class="modal-body"&gt;
                   &lt;img src="images/pic1.jpg" alt=""&gt;
                  &lt;/div&gt;
  
                &lt;div class=" col-xs-12 col-md-9"&gt;
                 &lt;h6&gt;consectetur adipisicing elit. &lt;/h6&gt;
  
                 &lt;p&gt;
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                  &lt;/p&gt;
                &lt;button ng-click="vm.closeModal('profile-1');"&gt;Close&lt;/button&gt;
                 &lt;/div&gt;
                &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/modal&gt;
  </code></pre>
  
  <p>I have then use this controller code based on this website:<a href="http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial" rel="nofollow noreferrer">angularjs custom modal</a></p>
  
  <pre><code> controller.js
            `angular.module('RouteControllers', [])
             .controller('AboutController', function($scope)  {
  
     function Controller(ModalService) {
         var vm = this; 
         vm.openModal = openModal;
         vm.closeModal = closeModal;
  
     initController();
  
     function initController() {
          //vm.bodyText = 'This text can be updated in modal 1';
     }         
     function openModal(id){
          ModalService.Open(id);
     } 
     function closeModal(id){
          ModalService.Close(id);
     }
  }
  </code></pre>
  
  <p>I've tried few ways but I think at the moment I'm just confused. Any helpful tips would be lovely.</p>