title: How to pass HTML markup in UI bootstrap modal
body: <p>I am using UI bootstrap to create modal dialog. It works fine if I use "templateUrl" and use "ng-template" to include the html template. But as I have multiple modal dialogs, my page is getting bigger and bigger after including all the html templates in the page using "ng-template".</p>
  
  <p>Here's the code:
  HTML
      </p>
  
  <pre><code>&lt;head&gt;
    &lt;script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"&gt;&lt;/script&gt;
    &lt;script data-require="angular-animate@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script data-require="ui-bootstrap@1.3.2" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div ng-controller="myCtrl"&gt;
      &lt;script type="text/ng-template" id="myContent.html"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          Modal body content goes here...
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button class="btn" type="button" ng-click="cancel()"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;button type="button" class="btn btn-default" ng-click="open()"&gt;Show modal&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>angular.module('mydemo', ['ngAnimate', 'ui.bootstrap']);
  angular.module('mydemo').controller('myCtrl', function ($scope, $uibModal, $log) {
  
    $scope.open = function (size) {
  
      var modalInstance = $uibModal.open({
        templateUrl: 'myContent.html',
        controller: 'ModalInstanceCtrl',
        size: size
      });
    };
  });
  
  angular.module('mydemo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
    $scope.cancel = function () {
      $uibModalInstance.dismiss('cancel');
    };
  });
  </code></pre>
  
  <p>Is there any way I can use HTML markup directly instead of using "templateUrl"?
  Or atleast a way through which I can keep the html templates in a separate file instead of including it in the page using ng-template?
  Here's the working example:
  <a href="http://plnkr.co/edit/HqThAG79r22K2VGZSs2D?p=preview" rel="nofollow">http://plnkr.co/edit/HqThAG79r22K2VGZSs2D?p=preview</a></p>