feat(popover): use expression to fix usage with $sce

Allows for trusted resource URLs through Strict Contextual Escaping ($sce).
If the an interpolated expression is used instead, then the benefits of SCE is
lost.

Fixes #3558

src/popover/docs/demo.html

@@ -14,7 +14,7 @@ <h4>Dynamic</h4>
     </div>
     <button popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" class="btn btn-default">Dynamic Popover</button>
 
-    <button popover-template="{{dynamicPopover.templateUrl}}" popover-title="{{dynamicPopover.title}}" class="btn btn-default">Popover With Template</button>
+    <button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" class="btn btn-default">Popover With Template</button>
 
     <script type="text/ng-template" id="myPopoverTemplate.html">
         <div>{{dynamicPopover.content}}</div>

src/popover/popover.js

@@ -9,14 +9,16 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
   return {
     restrict: 'EA',
     replace: true,
-    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&',
+    scope: { title: '@', contentExp: '&', placement: '@', animation: '&', isOpen: '&',
       originScope: '&' },
     templateUrl: 'template/popover/popover-template.html'
   };
 })
 
 .directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
-  return $tooltip( 'popoverTemplate', 'popover', 'click' );
+  return $tooltip( 'popoverTemplate', 'popover', 'click', {
+    useContentExp: true
+  } );
 }])
 
 .directive( 'popoverPopup', function () {

src/popover/test/popover-template.spec.js

@@ -18,7 +18,7 @@ describe('popover template', function() {
 
   beforeEach(inject(function($rootScope, $compile) {
     elmBody = angular.element(
-      '<div><span popover-template="{{ templateUrl }}">Selector Text</span></div>'
+      '<div><span popover-template="templateUrl">Selector Text</span></div>'
     );
 
     scope = $rootScope;
@@ -62,5 +62,19 @@ describe('popover template', function() {
 
     expect( elmBody.children().eq(1).text().trim() ).toBe( 'new text' );
   }));
+
+  it('should hide popover when template becomes empty', inject(function ($timeout) {
+    elm.trigger( 'click' );
+    expect( tooltipScope.isOpen ).toBe( true );
+
+    scope.templateUrl = '';
+    scope.$digest();
+
+    expect( tooltipScope.isOpen ).toBe( false );
+
+    $timeout.flush();
+    expect( elmBody.children().length ).toBe( 1 );
+  }));
+
 });
 

template/popover/popover-template.html

@@ -7,7 +7,7 @@
   <div class="popover-inner">
       <h3 class="popover-title" ng-bind="title" ng-if="title"></h3>
       <div class="popover-content"
-        tooltip-template-transclude="content"
+        tooltip-template-transclude="contentExp()"
         tooltip-template-transclude-scope="originScope()"></div>
   </div>
 </div>