Unable to use angular-ui.bootstrap inside a cell template

[mansu]

I am trying to use angular-ui.bootstrap elements inside (ex: http://angular-ui.github.io/bootstrap/#/tooltip) a html file provided to cellTemplateUrl. While my html markup works as expected, all the ui.bootstrap elements fails to render with the following error below.

Googling for the error directs me to angular/angular.js#1459. I am using angular JS 1.3.0-beta4. which should have fixed the issue. Looks like I can't use any of the hacks mentioned on the page since I don't control the html table. Is this a bug?

Error: [$compile:tplrt] Template for directive 'tooltipPopup' must have exactly one root element. template/tooltip/tooltip-popup.html
http://errors.angularjs.org/1.2.9/$compile/tplrt?p0=tooltipPopup&p1=template%2Ftooltip%2Ftooltip-popup.html
    at http://localhost:8081/js/angular.js:78:12
    at http://localhost:8081/js/angular.js:6367:21
    at http://localhost:8081/js/angular.js:7578:11
    at deferred.promise.then.wrappedCallback (http://localhost:8081/js/angular.js:10949:81)
    at deferred.promise.then.wrappedCallback (http://localhost:8081/js/angular.js:10949:81)
    at http://localhost:8081/js/angular.js:11035:26
    at Scope.$get.Scope.$eval (http://localhost:8081/js/angular.js:11955:28)
    at Scope.$get.Scope.$digest (http://localhost:8081/js/angular.js:11781:31)
    at Scope.$get.Scope.$apply (http://localhost:8081/js/angular.js:12061:24)
    at done (http://localhost:8081/js/angular.js:7843:45) angular.js:9419
(anonymous function) angular.js:9419
$get angular.js:6838
deferred.promise.then.wrappedCallback angular.js:10952
deferred.promise.then.wrappedCallback angular.js:10949
(anonymous function) angular.js:11035
$get.Scope.$eval angular.js:11955
$get.Scope.$digest angular.js:11781
$get.Scope.$apply angular.js:12061
done angular.js:7843
completeRequest angular.js:8026
xhr.onreadystatechange angular.js:7982

My code looks as follows:
Controller

    var taskColumns = [
      {label: 'Instance', map: 'instanceId'},
      {label: 'Status', map: 'status', cellTemplateUrl: '/taskStatus.html'},
    ];

Directive

auroraUI.directive('taskStatus', function () {
  return {
    restrict: 'E',
    replace: true
  };
});

  <div class='task-status'>
    <a href='#' tooltip-placement='right' tooltip='{{formatedValue}}'>{{formatedValue}}</a>
  </div>

[moustafaAhmed]

you just need to rename the tag name to be task-status or use restrict to class name not element you will find full description on this page https://docs.angularjs.org/guide/directive to know each kind of directive in AngularJs