title: How do templates work in Angular.js?
body: <p>I've been looking at this example and looking through google to no avail. I don't understand how <code>popover-template</code> works. Is it Angular's templating system? I couldn't find any documentation on this, so I thought I'll turn to the community. How can I similarly create my own template?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  
   &lt;head&gt;
    &lt;script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"&gt;&lt;/script&gt;
    &lt;script data-require="angular.js@1.1.5" data-semver="1.1.5" src="bootstrap-ui.js"&gt;&lt;/script&gt;
    &lt;link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" /&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
  
   &lt;body ng-controller="Ctrl"&gt;
    &lt;div style="padding-bottom: 400px"&gt;&lt;/div&gt;
    &lt;div class="container-fluid"&gt;
     &lt;fieldset&gt;
      &lt;div class="control-group"&gt;
       &lt;label class="control-label" for="tc"&gt;Sample:&lt;/label&gt;
        &lt;div class="controls"&gt;
         &lt;div class="input-prepend"&gt;
          &lt;input placeholder="Enter end date.." type="text" class="input-small" ng-model="entity.endDate" name="endDate" /&gt;
          &lt;button type="button" class="btn" ng-model="$parent.entity.endDate" popover-template="datepicker-test.html"&gt;
          &lt;i class="icon-calendar"&gt;&lt;/i&gt;
        &lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/fieldset&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>