title: Angular UI Modal: Inserting an Image into the modal body
body: <p>I am very new to AngularJS and have to integrate the Angular UI bootstrap to an existing AngularJS application.</p>
  
  <p>Inside the modal I have to place a screenshot and that's it. No unnecessary clutter. But I am unable to figure it out. There is a lot of messy stuff in the code and I am not able to do that.</p>
  
  <p>I don't want the selected items and the also the logs in the console too. Just a simple modal which shows screenshot(image) in it and that's it. Can anyone guide me?</p>
  
  <p>Here is the code.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"&gt;&lt;/script&gt;
      &lt;script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/script.js"&gt;&lt;/script&gt;
      &lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;style&gt;
        .btn-custom{
          position: fixed;
          margin-top: 20px;
          bottom: 0px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo"&gt;
      &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title" id="modal-title"&gt;Here's what we are cooking new for you!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body" id="modal-body"&gt;
            &lt;!-- &lt;img ng-src={{source}} class="img-responsive"&gt; --&gt;
            &lt;img ng-src="{{source}}" id="modal-body"&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="item in $ctrl.items"&gt;
                      &lt;a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item"&gt;{{ item }}&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              Selected: &lt;b&gt;{{ $ctrl.selected.item }}&lt;/b&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;!-- &lt;button class="btn btn-primary" type="button" ng-click="$ctrl.ok()"&gt;OK&lt;/button&gt; --&gt;
              &lt;button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
      &lt;/script&gt;
      &lt;!-- &lt;script type="text/ng-template" id="stackedModal.html"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title" id="modal-title-{{name}}"&gt;The {{name}} modal!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body" id="modal-body-{{name}}"&gt;
              Having multiple modals open at once is probably bad UX but it's technically possible.
          &lt;/div&gt;
      &lt;/script&gt; --&gt;
  
      &lt;button type="button" class="btn btn-default btn-custom" ng-click="$ctrl.open()"&gt;Open me!&lt;/button&gt;
      &lt;!-- &lt;div ng-show="$ctrl.selected"&gt;Selection from a modal: {{ $ctrl.selected }}&lt;/div&gt; --&gt;
      &lt;div class="modal-parent"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the Script.js</p>
  
  <pre><code>angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document) {
    var $ctrl = this;
    $ctrl.items = ['item1', 'item2', 'item3'];
    // $ctrl.source = Screenshot.png;
  
    $ctrl.animationsEnabled = true;
  
    $ctrl.open = function (size, parentSelector) {
      var parentElem = parentSelector ?
        angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
      var modalInstance = $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        controllerAs: '$ctrl',
        size: size,
        appendTo: parentElem,
        resolve: {
           items: function () {
            return $ctrl.items;
          }
        }
      });
  
      modalInstance.result.then(function (selectedItem) {
        $ctrl.selected = selectedItem;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  
    $ctrl.openComponentModal = function () {
      var modalInstance = $uibModal.open({
        animation: $ctrl.animationsEnabled,
        component: 'modalComponent',
        resolve: {
          source: function(){
            return $ctrl.source;
          }
          // ,
          // items: function () {
          //   return $ctrl.items;
          // }
        }
      });
  
      modalInstance.result.then(function (selectedItem) {
        $ctrl.selected = selectedItem;
      }, function () {
        $log.info('modal-component dismissed at: ' + new Date());
      });
    };
  
    $ctrl.openMultipleModals = function () {
      $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: 'modal-title-bottom',
        ariaDescribedBy: 'modal-body-bottom',
        templateUrl: 'stackedModal.html',
        size: 'sm',
        controller: function($scope) {
          $scope.name = 'bottom';
        }
      });
  
      $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: 'modal-title-top',
        ariaDescribedBy: 'modal-body-top',
        templateUrl: 'stackedModal.html',
        size: 'sm',
        controller: function($scope) {
          $scope.name = 'top';
        }
      });
    };
  
    $ctrl.toggleAnimation = function () {
      $ctrl.animationsEnabled = !$ctrl.animationsEnabled;
    };
  });
  
  // Please note that $uibModalInstance represents a modal window (instance) dependency.
  // It is not the same as the $uibModal service used above.
  
  angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) { //In case of any changes, change the source to items
    var $ctrl = this;
    $ctrl.items = items;
    $ctrl.selected = {
      item: $ctrl.items[0]
    };
  
    $ctrl.ok = function () {
      $uibModalInstance.close($ctrl.selected.item);
    };
  
    $ctrl.cancel = function () {
      $uibModalInstance.dismiss('cancel');
    };
  });
  
  // Please note that the close and dismiss bindings are from $uibModalInstance.
  
  //Change ui.bootstrap.demo to powerMe App
  
  angular.module('ui.bootstrap.demo').component('modalComponent', {
    templateUrl: 'myModalContent.html',
    bindings: {
      resolve: '&lt;',
      close: '&amp;',
      dismiss: '&amp;'
    },
    controller: function () {
      var $ctrl = this;
  
      $ctrl.$onInit = function () {
        $ctrl.items = $ctrl.resolve.items;
        $ctrl.selected = {
          item: $ctrl.items[0]
        };
      };
  
      $ctrl.ok = function () {
        $ctrl.close({$value: $ctrl.selected.item});
      };
  
      $ctrl.cancel = function () {
        $ctrl.dismiss({$value: 'cancel'});
      };
    }
  });
  </code></pre>